2

最初の文字の色を変更し、css でテキストをアニメーション化しようとしています。Chrome と Safari では正常に動作しますが、Internet Explorer 10 & 11 では動作しません。ここに私のcssコードがあります:

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

:first-letter 疑似要素がない場合、アニメーションは IE で魅力的に機能します。

4

3 に答える 3

0

どのバージョンの IE でテストしていますか? IE 10 および 11 で動作するはずですが、以前のバージョンでは CSS3 アニメーションの使用がサポートされていません。http://caniuse.com/css-animationをご覧ください

于 2013-11-08T09:32:13.853 に答える
0

なぜこれを行うのかわかりません。擬似クラスにプロパティを追加する:first-letterと、アニメーションが機能しなくなります。

擬似クラスは前の:first-letterホバーをキャンセルするようです。

jsフィドル

疑似クラスがアクティブになっているときはいつでもわかるように、以前の :hover (この場合の遷移) はすべてキャンセルされます。

あなたの場合、私はあなたのアニメーションを実行しません

なぜこれが起こるのかわかりませんが、以前の大きなバグの新しいバグのようです:

:first-letter疑似クラスは、その後にクラスまたは疑似クラスが続くと機能しません (例: div:first-letter:hover)。
今は逆になっているような？

理論では、前に疑似クラスがあるときはいつでも機能し:first-letterません。:hover疑似クラスが「生成されたコンテンツ」として認識されない可能性があります。

:first-letter および :first-line 疑似要素が、:before および :after を使用して生成されたコンテンツを持つ要素に適用される場合、 生成されたコンテンツを含む要素の最初の文字または行に適用されます。

ソース: http://www.w3.org/TR/CSS2/selector.html#before-and-after

そうすれば、:hoverは表示されません。

いくつかのドキュメントを調べましたが、アニメーション、キーフレーム、変換、最初の文字の疑似クラスの間に他の関係 は見つかりませんでした。ホバー puedo-class と最初の文字の psuedo-class の間を除いて、IE で相互に対話しない可能性があります。

TL;DR

それはおそらくバグです。
あなたの疑似クラスは、親要素の疑似クラス:first-letterと連携していません。:hover表示され:hoverない疑似クラスであるため、アニメーションはロードされません。

回避策

コンテンツを HTML に直接配置し、最初の文字をスパンにラップするだけです。

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

アンカーがホバーされているときにスタイルを追加する場所:

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

jsフィドル

于 2013-11-08T12:21:50.170 に答える
0

バージョン 9 以前でテストしている場合、何も表示されません。

ボタンでブラウザを IE 10 以上にしてから、 IE10 または IE11F12を選択できます。Browsermode

于 2013-11-08T09:48:27.457 に答える