WebKit 错误？悬停状态不会应用于通过 CSS 插入的内容答案

【问题标题】：WebKit bug? Hover state does not get applied to content inserted via CSSWebKit 错误？悬停状态不会应用于通过 CSS 插入的内容
【发布时间】：2012-12-01 05:47:36
【问题描述】：

似乎存在一个 WebKit 错误，它不会将悬停状态应用于通过 CSS 中的 content 属性插入的内容。

有人知道解决方法吗？

a:before {
    content: "Hover Over Me";
}
a:hover {
    color: red;
}

示例：http://jsfiddle.net/wdmedal/X4gjL/1/

结论：这个bug似乎只影响inline元素。

解决方法：将元素的显示类型设置为inline-block（或其他显示类型）。

【问题讨论】：

说真的，WebKit 需要停止让 IE8 在符合所有这些错误的标准方面看起来不错（尽管公平地说，IE8+ 似乎无法处理 display: table 上的 :hover 和朋友，而 WebKit做得很好）。这甚至不是一些全新的 CSS3 东西......
将内容添加到 HTML 中的链接使其工作？
@Whymarrh：是的，但是如果您将生成的内容悬停，您仍然无法触发悬停样式。

标签： css webkit

【解决方案1】：

这对我有用http://jsfiddle.net/X4gjL/5/

a:before {
    content: "Hover Over Me";
}
a.foo:hover {
    color: red;
}
a.foo
{
    display:block;
}

-------------编辑---------

感谢BoltClock 指出这一点，使其 inline-block 默认情况下不会像块一样使宽度为 100%。 http://jsfiddle.net/X4gjL/6/

a:before {
    content: "Hover Over Me";
}
a.foo:hover {
    color: red;
}
a.foo
{
    display:inline-block;
}

【讨论】：

我也刚刚意识到这一点。该错误似乎只影响inline 元素。我正要回答我自己的问题，但你打败了我！
您也可以将其设为内联块，使其不会延伸到整个页面宽度。
@BoltClock 你是对的，我编辑了答案并为未来的用户添加了它。确保引用我的来源。谢谢！