A: background rebellion guidance problem

Question

For some reason, I'm not quite sure why, but the following does not work. The background position remains unchanged on hover. I can’t understand why. I could have done it differently, but I would like to try to understand why this is not working.

#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 anyone know what could be causing this?

Thanks in advance!

Ryan

Answer 1

Identifier selectors take precedence over pseudo-class selectors.

thus, the rule #will not be exceeded by the rule :.

either use an 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;
}

Answer 2

#nav a#home #nav a#about-us , #nav a:hover (id > ), . #nav a#home:hover #nav a#about-us:hover .

.

Answer 3

:

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

Answer 4

, , - , :

. Intead <a id="home"> <a class="home">. a#home a.home, .

:

<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>