a: Problème d'arrière-plan de post-scrutation

Question

Pour une raison quelconque, je ne suis pas entièrement sûr de la raison, mais ce qui suit ne fonctionne pas. La position de fond reste simplement la même en stationnaire. Je ne peux pas comprendre pourquoi. Je pourrais le faire d'une autre façon, mais j'aimerais essayer de comprendre pourquoi cela ne fonctionne pas.

#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; 
} 

Quelqu'un sait-il ce qui pourrait être la cause?

Merci d'avance!

Ryan

Answer 1

Les sélecteurs d'identification ont la priorité sur les sélecteurs pseudo-classe ..

ainsi la règle # ne sera pas surchargée par une règle : ..

soit utiliser la directive! important

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

ou rendre la règle plus spécifique

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

Answer 2

#nav a#home et #nav a#about-us ont une spécificité plus élevée que #nav a:hover (id> pseudo-classe), de sorte que ce dernier n'est jamais appliqué. #nav a#home:hover et #nav a#about-us:hover fonctionnerait ici.

Voir the cascade.

Answer 3

Essayez ceci:

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

Answer 4

Je sais que ce n'est pas plus pertinent, mais si quelqu'un va ici, donc il y a une option supplémentaire:

Changez le Ids aux classes. Au lieu de <a id="home"> , utiliser <a class="home">. Maintenant, changez vos styles de a#home à a.home et cela fonctionnera.

code complet:

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