简单的 CSS :before:hover 不起作用？ CSSlint 没有错误？答案

【问题标题】：Simple css :before:hover not working? CSSlint no errors?简单的 CSS :before:hover 不起作用？ CSSlint 没有错误？
【发布时间】：2011-10-16 14:14:00
【问题描述】：

http://jsfiddle.net/nicktheandroid/k93ZK/2/

这应该很简单，我只是不明白为什么它不起作用。当悬停在 :before 上时，它应该将其不透明度更改为 1，但事实并非如此。为什么？

p {
    padding-top:15px;
    position:relative;
}

p:before {
    display:block;
    width:55px;
    height:55px;
    content: 'hello';
    background:#fff;
    padding:5px 10px;
    position:absolute;
    right:0;
    opacity:.5;
    -webkit-transition: all 0.3s ease-in-out;

}

p:before:hover {
    opacity:1;
    bakcground:#000;
}

编辑：我正在使用 Chrome。

【问题讨论】：

顺便说一句。 IE7、IE6 不支持:before 和:after。 IE8 支持有问题。
@nix：你甚至可以补充说 IE 不支持 opacity 和 -webkit-transition 只是 WebKit ......很多事情 OP 已经知道并且显然不关心。跨度>
有很多事情对某些人来说可能是显而易见的，而对其他人来说却不是。这不一定适用于 OP，而是其他稍后会阅读此问题的人。
毫无价值的是 CSS Lint 不是验证器。这只是抱怨，好吧，一切。特别是规范所说的一切都可以/鼓励。
是的，我听说过关于 CSS lint 的抱怨，但如果 IT 没有抛出错误，那么我很确定我很好......因为它抱怨一切。

标签： css css-selectors pseudo-element pseudo-class csslint

【解决方案1】：

您需要p:hover:before，而不是p:before:hover。

见：http://jsfiddle.net/k93ZK/3/

【讨论】：

漂亮，如果我想将悬停事件添加到 p:before 元素，那么当我悬停 p:before 元素时它会改变不透明度，而不是段落本身？
@android.nick：不幸的是，使用伪元素（例如:before）无法做到这一点。
+1 啊，这就是我要找的答案，谢谢！

【解决方案2】：

如果你想让它在 Internet Explorer 中运行，只需在你的 css 中添加以下代码：

p:hover{}

就是这样。

Internet Explorer (10) 的工作示例：

http://jsfiddle.net/k93ZK/63/

【讨论】：