Grow your CSS skills. Land your dream job.

[Solved] CSS Hover Problem

  • # January 31, 2010 at 8:53 am

    I have a problem. I want to change header’s image when the mouse is over navbar. For example:

    header { background: url(‘myimages.jpg’) repeat; } -> The image before over

    navbar:hover { } -> The code for over, i don’t know what i have to add here

    Thanks

    # January 31, 2010 at 9:02 am

    I don’t think that can be done purely using CSS as you are changing a different element. You will need to use Javascript to make this work

    # January 31, 2010 at 7:04 pm

    If you can make the header child of the navbar in some way, then this would be possible…

    Code:
    navbar header { background: url(image1.jpg); }
    navbar:hover { background:url(image2.jpg); }

    Though in some situations it might not be good semantics to have your header within your navbar.

    Otherwise a bit of jquery would do the trick. Something like this…

    Code:
    $(‘navbar’).hover(function() {
    // Function called on hover
    $(‘header’).css({ background : “url(image2.jpg)” });
    },
    function() {
    // Function called when mouse moved off navbar element
    $(‘header’).css({ background : “url(image1.jpg)”
    });
    # February 2, 2010 at 9:40 am

    I will use Jquery’s code. Thanks!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".