0

我想用 css 替换悬停时的文本，虽然它不起作用，但 Google chrome 忽略了整个:hover伪类，而 Mozilla firefox 安全地忽略content并继续运行其余事件

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 声明，并且我知道它content不应该适用于:hover，这没什么大不了的，因为使用 javascript 实现很容易。

但是，然后我进一步研究并尝试使用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 回答