0

ホバー時のテキストをcssに置き換えたかったのですが、うまくいきませんでしたが、Google chromeは:hover疑似クラス全体を無視し、Mozilla firefoxcontentは残りのイベントを安全に無視して実行し続けました

HTML:

<li id="menuDebating"><a href="xc_debating.htm">Debating</a></li>​

CSS:

#menuDebating a:hover{
content: "Public Speaking" !important;
color:red;
}​

フィドル: http://jsfiddle.net/FSyAv/

しかし、私はcss3 宣言を読んだことがありますが、実装は javascript で簡単なので、大したことではありませんcontent。:hover

しかし、私はそれをさらに見て、a:hover::before疑似クラスを使用しようとしましたが、それは本当に奇妙になります

HTML:

<li id="menuDebating"><a href="xc_debating.htm">Debating</a></li>

CSS:

#menuDebating a:hover::before{
content: "Public Speaking" !important;
color:red;
}

フィドル: http://jsfiddle.net/FSyAv/1/

Chrome ではノンストップでちらつき、Safari ではちらつき、その後しばらく停止してちらつき続けますが、Mozilla と Opera では意図したとおりにイベントが実行されます。

4

1 に答える 1

1

content 疑似要素（beforeおよび）でのみ使用できますafter。

位置を絶対に設定することで、元の単語を強制的に「上書き」することができます。

デモ

ul li {
    position:relative;
}
#menuDebating a:hover:before{
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    content: "Public Speaking";
    color:red;
    background:#FFF;
}​
于 2012-11-03T10:13:31.253 に答える