Grow your CSS skills. Land your dream job.

On hover change differend background aswell

  • # June 22, 2009 at 11:15 am

    Hallo there. First post on css-tricks.
    Following question:

    I have multible tabs that change background on hover, if visted and if active. The tabs are connected to a sheet. I want the sheet to change color or image when one of the tabs have been hovered. so that the sheet changes backround when i hover over a tab. Sounds simple but i cannot get it to work.
    A bit of code that i have allready used:

    html.
    <ul id="nav">
    <li class="home"><a href="#">home</a></li>
    <li class="rss"><a href="#">rss</a></li>
    <li class="products"><a href="#">products</a></li>
    <li class="links"><a href="#">links</a></li>
    <li class="contact"><a href="#">contact</a></li>
    <li class="offshore"><a href="#">Offshore</a></li>
    </ul>

    css
    ul#nav {
    position:relative;
    }
    ul#nav li {
    display: inline;
    }
    ul#nav li a {
    position:relative;
    height: 30px;
    text-indent: -9999px;
    float: left;
    }
    ul#nav li.home a {
    width: 110px;
    background: url(images/nav-home.jpg) bottom center no-repeat;
    }

    the whole list and then..
    ul#nav li a:active{
    background-position: center center;
    }
    #nav li a:hover {
    background-position: top center;}

    Is this possible without using JS

    # June 22, 2009 at 12:06 pm

    Just add:
    ul#nav li.home a:hover {
    background: url(images/nav-home-hover.jpg) bottom center no-repeat; /* Your hover img*/
    }

    Also, you should look at this video: http://css-tricks.com/video-screencasts … s-sprites/

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

You must be logged in to reply to this topic.

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