CSS hover-überblendung cross-browser-Kompatibilität

Habe ich eine einfache Sprache wählen Sie die Seite mit reinem CSS animierte übergänge. Ich habe ein jsFiddle hier.

Wie soll es sich Verhalten wie folgt:

Benutzer die Maus über einen der zwei (oder mehr) Sprache Auswahlen.
Die Sprachwahl übergänge nach oben und kommt zur vollen Deckkraft. Der relevante text in Sprache (z.B. English, Español) erscheint als gut.
Der Benutzer klickt auf den link oder out-Mäusen, bei denen der übergang der macht.

In Chrom, es verhält sich wie erwartet.

In Firefox, wenn ich die Maus über eine Bild beide nach oben zu verschieben.

In der Oper, es verhält sich meist wie erwartet, aber der text springt zurück nach unten nach oben bewegt.

Ich versuche zu verstehen warum dies geschehen würde in diesen Browsern, und wie ich es beheben kann, falls möglich.

In dem Fall, dass jsFiddle ist der relevante code:

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

funktioniert perfekt auf meinem firefox
Versuchen Sie immer den neuesten FF?
Dies ist nicht eine Lösung für Ihr problem, aber Sie sollten wissen, dass wenn Sie kommen Sie es von der Unterseite des Elements nach oben bewegt, die bewirkt, dass meine Maus außerhalb des Elements, so dass es sich nach unten bewegt. Es mache das immer, wenn Sie nicht die Maus bewegen. Ziel ist ein element, dass wird den gesamten Raum oder überdenken verschieben des Elements nach oben und unten.
Hinzufügen @MiniRagnarok Kommentar. Sollten Sie überlegen, zu animieren, ein Kind-element, so dass Sie behalten bewegen Sie den Mauszeiger auf das element.

InformationsquelleAutor wchargin | 2013-03-14

Bekam ich seltsame Probleme mit firefox(v12), sowie, wo es war, bewegen sich beide Elemente bis auf hover. Spätere Versionen (19v), es schien gelöst.

Ich glaube es war etwas mit Ihren selectors und wie mozilla interpretiert Dinge versus webkit. Sehen Sie, wenn diese jsfiddle für Sie arbeitet.

Alles was ich wirklich getan habe war ändern, eine Menge der Selektoren von a zu .langcell und es scheint zu funktionieren. Ich musste wieder ein bisschen anpassen, mit css erreichen Sie den gleichen Stil, wie die verschachtelten .langcell a - Selektor. Ich habe den Verdacht, dass es möglicherweise aufgrund a als inline standardmäßig während p block und img ist inline-block.

Ich werde nicht Lügen und sagen, ich völlig verstehen, warum das geschah, um mit zu beginnen, aber nur im Allgemeinen, was Stile zu Klassen über Elemente ist nicht nur eine Präferenz, es ist effizienter bei der render-Zeit.

CSS Selector 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;
    }

InformationsquelleAutor Bryan Robles

0

CSS3 ist noch relativ neu. Und viele der features sind noch nicht kompatibel mit vielen Browsern. Compatibility Chart

So, ist es irgendwie abtörnend, wenn Ihre Kunden einen etwas älteren Browser (auch wenn Sie ein Jahr alte version), in diesem Fall CSS3 transition nicht funktionieren.

Ihre sicherste Wette, um den übergang zu finden, ist mithilfe von javascript oder javascript-Bibliothek wie jQuery

InformationsquelleAutor Jehanzeb.Malik

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.