Hover, États emboutie et actifs non Affichage pour 1 Bouton dans la barre de navigation

Question

J'ai une navigation d'Apple sur le thème basé sur sprites CSS bar, que vous pouvez voir ici:

http://www.marioplanet.com/index.asp

Maintenant, pour certains raison, je ne peux pas dire pourquoi, il semble y avoir un problème dans les états hover, pressé et actif du bouton "Home". Pour une raison quelconque, il semble juste statique.

Ce fichier, http://www.marioplanet.com/css/nav.css

qui a ce code:

/* GLOBALHEADER */ 
#globalheader { width: 671px; height: 37px; margin: auto; position: relative; z-index: 100; } 
#globalheader #globalnav { margin: 0; padding: 0; zoom: 1; width: 100%;} 
#globalheader #globalnav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
#globalheader #globalnav li { display: inline; } 
#globalheader #globalnav li a { float: left; width: 103px; height: 37px; text-indent:-1000em; overflow: hidden; background-image:url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; } 
#globalheader #globalsearch { background-image: url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; } 

/* BUTTONS */ 
#globalheader #globalnav li#gn-home a { background-position: 0px 0px; } 
#globalheader #globalnav li#gn-catalog a { background-position: -103px 0px; } 
#globalheader #globalnav li#gn-about a { background-position: -206px 0px; } 
#globalheader #globalnav li#gn-contact a { background-position: -309px 0px; } 
#globalheader #globalnav li#gn-media a { background-position: -412px 0px; } 

/* OVER STATES */ 
#globalheader #globalnav li#gn-home a:hover { background-position: 0px -37px; } 
#globalheader #globalnav li#gn-catalog a:hover { background-position: -103px -37px; } 
#globalheader #globalnav li#gn-about a:hover { background-position: -206px -37px; } 
#globalheader #globalnav li#gn-contact a:hover { background-position: -309px -37px; } 
#globalheader #globalnav li#gn-media a:hover { background-position: -412px -37px; } 

/* PRESSED STATES */ 
#globalheader #globalnav li#gn-home a:active { background-position: 0px -76px; } 
#globalheader #globalnav li#gn-catalog a:active { background-position: -103px -76px; } 
#globalheader #globalnav li#gn-about a:active { background-position: -206px -76px; } 
#globalheader #globalnav li#gn-contact a:active { background-position: -309px -76px; } 
#globalheader #globalnav li#gn-media a:active { background-position: -412px -76px; } 

/* ON STATES */ 
#globalheader.home #globalnav li#gn-home a:hover { background-position: 0px 0px !important;} 
#globalheader.catalog #globalnav li#gn-catalog a { background-position: -103px -114px !important; } 
#globalheader.about #globalnav li#gn-about a { background-position: -206px -114px !important; } 
#globalheader.contact #globalnav li#gn-contact a { background-position: -309px -114px !important; } 
#globalheader.media #globalnav li#gn-media a { background-position: -412px -114px !important; } 

/* GLOBAL SEARCH */ 
#globalsearch {width: 156px; height: 37px; position: absolute; top:0; right: 0; background-position: 100% 0; background-repeat: no-repeat; text-align: center; border-width: 0px; } 
#inputString{background: url(/images/globalnav/searchform.png); padding: 1px 20px 0 20px; width: 113px; height: 20px; margin-top: 7px; border: none; outline: none; } 

est probablement où réside le problème.

J'ai joué dans les DevTools de Google (essentiellement FireBug) pour essayer d'isoler le problème, mais je n'ai pas de chance.

Les sélecteurs des états du bouton "Accueil" apparaissent précis.

Et l'image source (http://marioplanet.com/images/globalnav/wanzart.png) a les états réels, donc ce n'est pas le problème ..

Answer 1

Votre règle ici juste sous /* ON STATES */ est ce qui le cause:

#globalheader.home #globalnav li#gn-home a:hover { background-position: 0px 0px !important;} 

Puisque vous êtes à l'écran d'accueil, vous êtes #globalheader ressemble à ceci:

<div id="globalheader" class="home"> 

donc à la différence des autres , le #globalheader.home sélecteur est étant appliqué ici, remplaçant tous les états hover. Supprimez cette règle, ou modifiez-la pour qu'elle soit background-position: 0px -37px, ce qui est probablement ce qui est prévu ... cette maison n'est pas permutable, pendant que vous êtes sur la page d'accueil.

Answer 2

Rappelez-vous quand vous des liens de style et de leurs différents états, il est important d'avoir les styles dans cet ordre:

':link' or just 'a' then 
':visited' then 
':hover' then 
':active' then 

façon facile de se rappeler l'ordre -> HATE LoVe

donc, essayez réorganisant votre code CSS par bouton, plutôt que par les États.

Aussi votre bouton CSS est bien trop spécifique IMO. Si vous utilisez des ID, en supposant qu'ils soient uniques sur la page, ce qu'ils devraient être, vous pouvez les cibler directement en toute sécurité.