a:hover background-postition problem

For some reason, I am not entirely sure why, but the following is not working. The background position simply stays the same on hover. I cannot figure out why. I could do it anoth开发者_如何学JAVAer way, but I would like to try and get to the bottom of why it does not work.

#nav a:link, #nav a:visited {
    background:url(../img/nav-sprite.png) no-repeat;
    display:block;
    float:left;
    height:200px;
    padding:10px;
    text-indent:-9999px;
    border:solid 1px red;
}

    #nav a#home {
        background-position:-10px 0px;
        width:30px;
    }
    #nav a#about-us {
        background-position:-85px 0px;
        width:45px;
    }

#nav a:hover    {
    background-position:1px -15px;
}

Does anybody know what could be causing this?

Thanks in advance!

Ryan

The ID selectors have priority over the pseudo-class selectors..

thus the # rule will not be overriden by a : rule..

either use the !important directive

#nav a:hover    {
    background-position:1px -15px!important;
}

or make the rule more specific

#nav a#home:hover, #nav a#about-us:hover    {
    background-position:1px -15px;
}

#nav a#home and #nav a#about-us have higher specificity than #nav a:hover (id > pseudo-class), so the latter is never applied. #nav a#home:hover and #nav a#about-us:hover would work here.

See the cascade.

Try this:

#nav a#home:hover, #nav a#about-us:hover    {
    background-position:1px -15px;
}

I know it's not relevant anymore but if someone will get here so there is one more option:

Change the Ids to Classes. Intead of <a id="home"> use <a class="home">. Now change your styles from a#home to a.home and it will work.

Full code:

<div id="nav">
    <a href="#" class="home">Home</a>
    <a href="#" class="about-us">About Us</a>
</div>

<style>
        #nav a:link, #nav a:visited
        {
            background: url('smile-icon.jpg') no-repeat;
            display: block;
            float: left;
            height: 140px;
            padding: 10px;
            text-indent: -9999px;
            border: solid 1px red;
        }

        #nav a.home
        {
            background-position: -10px 0px;
            width: 30px;
        }

        #nav a.about-us
        {
            background-position: -85px 0px;
            width: 45px;
        }

        #nav a:hover
        {
            background-position: 1px -15px;
        }
    </style>