Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Help urgent!!

  1. #1
    New Coder
    Join Date
    Feb 2012
    Location
    Singapore
    Posts
    21
    Thanks
    2
    Thanked 1 Time in 1 Post

    Help urgent!!

    is there a way to do this on hover effect?

    I want to add a graphic when there is a hover effect and a background color.
    Is there a way to combine them?
    before hover there is only the text and when hovered, there is the background color on the left and the graphic arrow on the right. I hope someone would be able to help me out! I need it to be done by tonight!

    The red line is the indication of the left and right.



    Here is the code:

    http://jsfiddle.net/nasyitah08/UvqPc/33/

    I'd like to replace the css with a graphic arrow as that the request I'm supposed to follow. this is driving me nuts! please help anyone!!

  • #2
    New Coder
    Join Date
    Feb 2012
    Location
    Finland
    Posts
    59
    Thanks
    3
    Thanked 9 Times in 9 Posts
    Easiest way to do this is giving the div that contains the link an hover effect background-image.

    Let's assume your HTML code part looks more or less like this;

    <div id="hello"><a href="#">Hello</a></div>


    Then you can do something like this to your CSS;


    #hello {
    width: 50px;
    }

    #hello:hover {
    width: 50px;
    background-image:url(linkhover.png);
    }


    (You need to cut the whole background you want this way, the "only" color part and the arrow to same picture)
    Hope this helps you to get started!

    -Riku

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,637
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    All possible with CSS (in modern browsers): http://nicolasgallagher.com/pure-css...-bubbles/demo/

  • #4
    New Coder
    Join Date
    Feb 2012
    Location
    Singapore
    Posts
    21
    Thanks
    2
    Thanked 1 Time in 1 Post
    hi VIPStephen,

    Yup, its all possible in CSS. I've cracked my brain to do it in CSS and only now I was told to do it in image form as there are some text with 2 lines. Here is my work:

    http://jsfiddle.net/nasyitah08/UvqPc/35/

    This is actually what I meant with the double line and the arrow.



    Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •