Grow your CSS skills. Land your dream job.

CSS Rollover displays hover image behind not in front

  • # August 31, 2009 at 3:27 pm

    Here is the link:
    http://terryjennywed.com/testhome.html

    The problems with the nav bar are the image appears behind not in front and they appear to the left, not on top of the original image.

    The site is at a really rough stage, but I want to get the rollovers working first. I have the rollover CSS in a separate CSS file, here are the contents of the nav CSS sheet:

    @charset "utf-8";
    #nav ul {
    list-style: none;
    width: 1024px;
    float: right;
    height: 130px;
    }
    #nav li {
    float: left;
    text-align: center;
    padding-right: 40px;
    width: 108px;
    padding-left: 80px;
    }
    #nav a {
    width: 180px;
    display: block;
    padding-top: 110px;
    text-decoration: none;
    color: #CC6600;
    height: 100px;
    background: #333333 url(../Nav_noskulls.jpg);
    }

    #homeNav a {
    background: url(../Nav/images/off_Home.gif) no-repeat left top;
    }
    #homeNav:hover {
    background: url(../Nav/images/images/on_Home.gif) no-repeat 0 0;
    }

    #registryNav a {
    background: url(../Nav/images/off_registry.gif) no-repeat;
    }
    #registryNav:hover
    {
    background: url(../Nav/images/images/on_registry.gif) no-repeat;
    }
    #hotelNav a {
    background: url(../Nav/images/off_hotel.gif) no-repeat;
    }
    #hotelNav:hover
    {
    background: url(../Nav/images/images/on_hotel.gif) no-repeat;
    }
    #contactNav a {
    background: url(../Nav/images/off_contact.gif) no-repeat;
    padding-right: 0px;
    }#contactNav:hover
    {
    background: url(../Nav/images/images/on_contact.gif) no-repeat;
    }
    #nav #contactNav {
    padding-right: 0;
    }

    # August 31, 2009 at 4:19 pm

    Hi Abbeynormal,

    It sounds like you’re missing some basic principles of what you are actually doing.

    You have this code:

    Code:
    #hotelNav:hover
    {
    background: url(../Nav/images/images/on_hotel.gif) no-repeat;
    }

    Please note that the property is background not foreground. This image get’s applied to the background of the <li id="hotelNav">, and that <li> a child <a> that has it’s own background image that you are not removing.

    I recommend changing the :hover to the <a> so that it will replace the background image with your new one.

    Sample code… This *should* work, but I haven’t tested it.

    You’ll notice that the only change I made was to change "#homeNav:hover {" to "#homeNav a:hover {" for the four menu items.

    Code:
    @charset “utf-8″;
    #nav ul {
    list-style: none;
    width: 1024px;
    float: right;
    height: 130px;
    }
    #nav li {
    float: left;
    text-align: center;
    padding-right: 40px;
    width: 108px;
    padding-left: 80px;
    }
    #nav a {
    width: 180px;
    display: block;
    padding-top: 110px;
    text-decoration: none;
    color: #CC6600;
    height: 100px;
    background: #333333 url(../Nav_noskulls.jpg);
    }

    #homeNav a {
    background: url(../Nav/images/off_Home.gif) no-repeat left top;
    }
    #homeNav a:hover {
    background: url(../Nav/images/images/on_Home.gif) no-repeat 0 0;
    }

    #registryNav a {
    background: url(../Nav/images/off_registry.gif) no-repeat;
    }
    #registryNav a:hover
    {
    background: url(../Nav/images/images/on_registry.gif) no-repeat;
    }
    #hotelNav a {
    background: url(../Nav/images/off_hotel.gif) no-repeat;
    }
    #hotelNav a:hover
    {
    background: url(../Nav/images/images/on_hotel.gif) no-repeat;
    }
    #contactNav a {
    background: url(../Nav/images/off_contact.gif) no-repeat;
    padding-right: 0px;
    }#contactNav a:hover
    {
    background: url(../Nav/images/images/on_contact.gif) no-repeat;
    }
    #nav #contactNav {
    padding-right: 0;
    }

    I hope that helps.

    # September 1, 2009 at 1:57 am

    Thank you, this is awesome, it worked perfectly. I was following an examples out of a book that didn’t include rollovers in the template. I’ll backstep more next time.

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

You must be logged in to reply to this topic.

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