Question

我想用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 declaration，我知道content不适用于:hover，这不是什么大问题，因为使用javascript实现很容易。

但是，我接着进一步研究了它，并尝试使用a:hover::before psuedo-class，这就是它变得非常奇怪的地方

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按预期运行该事件

Answer 1

content can only be used with pseudo elements（before和after）。

您可以通过将其位置设置为绝对值来强制它“覆盖”原始单词：

Demo

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

为什么webkit浏览器中存在“内容”错误？

1 个答案: