CSS: Lien hover ne fonctionne pas sous Chrome et Safari

Je suis tombé sur ce gratuit exemple de modèle de conception de site web qui a quelques liens sur le dessus. Sur le vol stationnaire, le texte du lien et de leurs arrière-plan sont censés changer de couleur, en fonction de la CSS. Il fonctionne dans Firefox, Opera et IE mais il n'y a pas de changement sur le vol stationnaire dans Chrome 17.0.963.79 et Safari 5.1.2, je suis donc soupçonner une webkit question. Mais le CSS semble assez inoffensif. Où est le problème ici? La partie du CSS pour ce hover est la suivante:

.topNaviagationLink a:hover
{
text-align:center;
border-bottom:none;
color:#0C61C9;
display: block;
width:121px;
height: 35px;
line-height: 35px;
background-image:url(tab.png);    
}
vérifiez si le <a> a href..hover fonctionne pour les liens oly
Tous les liens ont hrefs.
êtes-vous sûr que la classe dans votre code html est topNaviagationLink et pas topNavigationLink
Ouais, c'est "navigation" à la fois dans le code HTML et CSS. L'auteur fait une erreur d'orthographe, mais c'est cohérent, de sorte que ne devrait pas être le problème.
Si vous déposez display:block; (et ajouter cette règle à .topNaviagationLink a) les modifications apportées par :hover travailler (ils seront mal alignées). Cependant, je n'ai pas d'explication pour ce comportement (voir aussi stackoverflow.com/questions/1845378/...).

OriginalL'auteur Abhranil Das | 2012-03-13

  1. 4

    Qui est intéressant...

    Cela fonctionne, serait-il acceptable?

    .topNaviagationLink:hover a
{
text-align:center;
border-bottom:none;
color:#0C61C9;
display: block;
width:121px;
height: 35px;
line-height: 35px;
background-image:url(tab.png); 
}
    +1. Intéressant. Cela fonctionne aussi, dans Chrome, Safari, Opera et Firefox, mais pas sous IE. J'ai tendance à penser que l'auteur fait de ce une erreur ici, plutôt que de supposer qu'il fait beaucoup d'erreurs ailleurs.
    Eh bien... Les autres réponses serait probablement obtenir IE travail en tant que bien, mais l'ensemble de ce balisage peuvent généralement être amélioré, tout en offrant un soutien pour tous les navigateurs. La vérité est que le <div>s que l' <a>s sont enveloppés dans de la sont inutiles. Jetez un oeil à ce violon, son plus propre, plus simple et est pris en charge par tous les navigateurs jsfiddle.net/kDjnd
    Il s'avère que les autres de répondre à vis dans IE aussi, plus que les vôtres. J'ai donc accepté la vôtre.
    Surprenant... c'est à dire est censé supporter le hover pseudo classe... Êtes-vous à l'aide de IE5 ou plus tôt?
    IE6 prend en charge :hover seulement sur les liens: quirksmode.org/css/contents.html#t16

    OriginalL'auteur henryaaron

  2. 4

    Qu'il a à faire avec la mise en display:block uniquement sur le vol stationnaire. Ajouter display:block sur les ancres de l'aller résout le problème, mais il le fait de changer l'affichage un peu.

    .topNaviagationLink a {
    display:block;
    text-align:center;
}

    Supprimer la marge négative .topNaviagationLink. Il va chercher un tout petit peu différent, mais ça fonctionne beaucoup mieux (hover cibles sont là où vous les attendez, etc).

    +1. Mais vis jusqu'grand moment dans IE encore.
    Le document est rendu dans IE mode Quirks (autrement connu comme IE6 Mode) parce que l'auteur a ajouté à ses conçus en commentaire avant le DOCTYPE ligne. Si vous remédier à cela, il devrait corriger certains des problèmes que vous voyez dans IE.
    Vous avez raison. Le repositionnement de la de commentaires a pris soin de les erreurs dans les deux solutions.

    OriginalL'auteur Matthew Darnell

  3. 1

    La <a> balise est un élément inline, donc quand vous survolez le <a> balise de l'image de fond ne s'affichera pas. Modifier la <a> les éléments à afficher: bloquer; et de même largeur/hauteur de l'image d'arrière-plan et il fonctionne parfaitement.

    Aussi comme Matthieu Darnell dit, ajouter du texte-align: center; et de supprimer les marges négatives.

    +1. Mais vis jusqu'grand moment dans IE encore.

    OriginalL'auteur Connor Burton