CSS hover transition de la croix-compatibilité avec les navigateurs

J'ai un langage simple, sélectionnez la page avec de la pure CSS transitions animées. J'ai fait un jsFiddle ici.

Comment on est censé se comporter comme suit:

  1. Utilisateur fait glisser la souris sur l'un des deux (ou plusieurs) langue sélecteurs.
  2. Que le sélecteur de langue transitions vers le haut et est livré à une opacité totale. La langue du texte (par exemple, anglais, Espagnol) apparaît ainsi.
  3. L'utilisateur clique sur le lien ou la souris, dans ce cas la transition inverse.

Dans Chrome, il se comporte comme prévu.

Dans Firefox, quand je souris sur un image, les deux déplacer vers le haut.

À l'Opéra, il se comporte essentiellement comme prévu, mais le texte saute en arrière vers le bas après le déplacement.

J'essaie de comprendre pourquoi ce qui allait se passer dans ces navigateurs, et comment je peux le résoudre, si possible.

Dans le cas que jsFiddle est en panne, le code correspondant est:

HTML

<div id="container"><div id="cell">
    <div class="langcell"><a href="en/index.html">
        <img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/200px-Flag_of_the_United_States.svg.png" /><br/><p>English</p></a>
    </div>
    <div class="langcell"><a href="es/index.html">
        <img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9a/Flag_of_Spain.svg/200px-Flag_of_Spain.svg.png" /><br/><p>Espa&ntilde;ol</p></a>
    </div>
</div></div>

CSS

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
display: table;
}
#cell {
display: table-cell; vertical-align: middle; text-align: center;
}
.langcell {
display: inline-block;
margin: auto 1em;
}
a {
position: relative;
top: 0;
-webkit-transition: top 0.25s;
-moz-transition: top 0.25s;
-o-transition: top 0.25s;
transition: top 0.25s;
color: black;
text-decoration: none;
}
a:hover {
top: -16pt;
}
a p {
font-size: 14pt;
font-weight: bold;
text-transform: uppercase;
font-family: Verdana, Geneva, sans-serif;
letter-spacing: 0.05em;
opacity: 0;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
a:hover p {
opacity: 1;
}
a img {
opacity: 0.65;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
a:hover img {
opacity: 1;
}
fonctionne parfaitement sur mon firefox
Essayez de vous procurer le dernier FF?
Ce n'est pas une solution à votre problème, mais vous devez savoir que si vous venez à partir du bas de l'élément se déplace vers le haut, ce qui provoque ma souris à l'extérieur de l'élément de sorte qu'il se déplace vers le bas. Il le fera à jamais si vous ne bougez pas la souris. Cibler un élément qui permettra de couvrir l'ensemble de l'espace ou de repenser le déplacement de l'élément en haut et en bas.
Pour ajouter à @MiniRagnarok commentaire. Vous devriez envisager de l'animation d'un élément enfant de sorte que vous conserver passez la souris sur l'élément.

OriginalL'auteur wchargin | 2013-03-14

  1. 5

    J'ai eu des problèmes bizarres sur firefox(v12), où il a été en mouvement à la fois les éléments en place sur le vol stationnaire. Dans les versions ultérieures (19v), il semblait résolu.

    Je pense qu'il y avait quelque chose à faire avec votre sélecteurs et comment mozilla interprète les choses contre webkit. Voir si cette jsfiddle qui fonctionne pour vous.

    Tout ce que je faisait était de changer beaucoup de sélecteurs de a à .langcell et il semble fonctionner. J'ai dû ré-ajuster un peu de css pour obtenir le même style, comme le imbriquée .langcell a sélecteur. Je soupçonne que cela pourrait être dû à a être inline par défaut lors de la p est bloquer et img est inline-block.

    Je ne vais pas mentir et dire que je comprends totalement pourquoi ce qui se passait, pour commencer, mais seulement en général, l'administration des styles à des classes d'éléments n'est pas juste une préférence, il est plus efficace au moment du rendu.

    Sélecteur CSS Performance

    Code:

        .langcell {
display: inline-block;
margin: auto 1em;
position: relative;
top: 0;
-webkit-transition: top 0.25s;
-moz-transition: top 0.25s;
-o-transition: top 0.25s;
transition: top 0.25s;
}
.langcell a { 
color: black;
text-decoration: none;
}
.langcell:hover {
top: -16pt;
}
.langcell p {
font-size: 14pt;
font-weight: bold;
text-transform: uppercase;
font-family: Verdana, Geneva, sans-serif;
letter-spacing: 0.05em;
opacity: 0;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.langcell:hover p {
opacity: 1;
}
.langcell img {
opacity: 0.65;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
langcell:hover img {
opacity: 1;
}

    OriginalL'auteur Bryan Robles

  2. 0

    CSS3 est assez nouveau. Et de nombreuses fonctionnalités ne sont pas encore compatibles dans de nombreux navigateurs. Tableau De Compatibilité

    Donc c'est une sorte de hors-la mise si vos clients ont un peu les anciens navigateurs (même si ils ont une année ancienne version), auquel cas CSS3 transition coutume de travail.

    Votre meilleure option pour faire de la transition est de le faire à l'aide de javascript, soit une bibliothèque javascript telles que jQuery

    OriginalL'auteur Jehanzeb.Malik