Die CSS-Animation funktioniert bei IE nicht, wenn sie verwendet werden: Hover und: Hover: Erster Buchstaben

Question

Ich versuche, den ersten Buchstaben zu ändern und einen Text mit CSS zu animieren. In Chrome und Safari funktioniert es ordnungsgemäß, aber im Internet Explorer 10 & 11 kann ich es nicht zum Laufen bringen. Hier ist mein CSS -Code:

.amy:before {
    content:"Amy";
}
.amy {
    display: block;
    width:50px;
    height:30px;
    color:#c63b2c;
    font-size:24px;
}
.amy:hover {        
    display: block;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: wobble;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: wobble;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-name: wobble;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: wobble; 
}
.amy:hover:first-letter {
    color:black;
}

Wenn es nein: Pseudo-Element im ersten Buchstaben gibt, funktioniert die Animation in IE wie einem Zauber.

Answer 1

Ich bin mir nicht sicher, warum es das tut. Wann immer Sie eine Eigenschaft zum Fügen Sie dem hinzu :first-letter PSUDO -Klasse, die Animation wird nicht mehr funktionieren.

Das :first-letter Die PSUDO -Klasse scheint den vorherigen Schweber zu kündigen.

jsfiddle

Wie Sie sehen können, wenn die PSUEDO -Klasse aktiv ist, wird die vorherige Absage: HOVER (der Übergang in diesem Fall).

In Ihrem Fall führe ich Ihre Animation nicht einmal aus

Ich nicht, warum das passiert, es scheint ein neuer Fehler von früheren Big zu sein:

:first-letter Die PSUDO-Klasse funktioniert nicht, wenn eine Klasse oder eine Pseudoklasse (z. B. Div: Erstgeschichte: Hover) folgt.
Es scheint, dass es jetzt umgekehrt ist?

Theorie ist, dass wenn er sich vor der Pseudoklasse befindet :first-letter Es wird nicht funktionieren. Es könnte sein, dass a :hover Die Pseudoklasse wird nicht als "generierter Inhalt" angesehen.

Wenn die: Erstgeschichte und: Erstline-Pseudoelemente auf ein Element angewendet werden, das mit dem Inhalt erstellt wird: Vor und: Nach: Nach dem ersten Buchstaben oder der ersten Zeile des Elements einschließlich der generierte Inhalte.

Quelle : http://www.w3.org/tr/css2/selector.html#before-and-after

So die :hover wird nicht gezeigt.

---

Ich habe mir mehrere Dokumentationen angesehen und konnte keine finden Sonstiges Beziehung zwischen Animation, Keyframes, Tranformation, Psuedo-Klasse im ersten Buchstaben. Überzeugung zwischen der Hover-Puedo-Klasse und der Psuedo-Klasse im ersten Buchstaben, die möglicherweise nicht miteinander in IE interagieren.

---

Tl; dr

Es ist höchstwahrscheinlich ein Fehler.
Dein :first-letter PSUDO-Klasse arbeitet nicht mit dem :hover PSUDO-Klasse des übergeordneten Elements. das :hover PSUDO-Klasse, die nicht gezeigt wird, daher ist Ihre Animation nicht geladen.

Arbeiten Sie herum

Sie können den Inhalt einfach direkt in Ihrem HTML einfügen und den ersten Buchstaben in eine Spannweite einwickeln:

<div style="width:160px;height:300px;float:right;">
    <a href="kapcsolat.html" class="animated menu5">
        <span>K</span>apcsolat
    </a>
</div>

Wo Sie einen Stil hinzufügen, wenn der Anker schwebt:

.menu5:hover > span
{
   color: black;
}

jsfiddle

Answer 2

In welcher Version von IE testen Sie? Es sollte in IE 10 und 11 funktionieren, aber frühere Versionen unterstützen die Verwendung von CSS3 -Animationen nicht. Schau mal http://caniuse.com/css-animation

Answer 3

Wenn Sie in Version 9 oder älter testen, wird nichts angezeigt

Sie können Ihren Browser in dh 10 oder höher einsetzen F12 Schaltfläche und dann auswählen Browsermode IE10 oder IE11