The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

[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


    # January 31, 2010 at 9:02 am

    This reply has been reported for inappropriate content.

    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…

    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…

    $(‘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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed