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

Question

这应该很简单，我只是不明白为什么它不能正常工作。当悬停在:before上时，它应该将其不透明度更改为1，但它没有。为什么？

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

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浏览器。

- android.nick

---

顺便说一下，IE7、IE6 不支持 :before 和 :after。IE8 的支持存在漏洞。 - ThatGuy

@nix：你甚至可以加上IE不支持opacity，而-webkit-transition只适用于WebKit...还有很多OP已经知道并且显然不关心的事情。 - BoltClock

有很多事情可能对一些人很明显，但对其他人不是。这并不一定是为了楼主，而是为了那些以后会阅读这个问题的人。 - ThatGuy

然而，值得注意的是，CSS Lint并不是一个验证器。它只是一个抱怨各种问题的工具。特别是那些规范认为是可以/鼓励的事情。 - BoltClock

是的，我听过有关CSS Lint的抱怨，但如果它没有报错，那么我相信我的代码是好的，因为它对所有东西都会抱怨。 - android.nick

我正在使用Chrome。真正使用StackOverflow的人会用IE作为他们的主要浏览器吗？（答案是，那些不知道Chrome的人）。如果有人正在阅读这篇文章，并且您正在使用IE，而且从未尝试过Chrome，我强烈建议您研究浏览器速度测试，看看它们如何比较。有些人喜欢Firefox，有些人喜欢Safari，但根据我所读到的，Chrome是最快的。有些人可能会认为这3个浏览器之间的速度差异微不足道，但我会尽可能地追求更快的速度。更不用说它只是一个漂亮的浏览器了... - android.nick

Answer 1

你需要使用 p:hover:before，而不是 p:before:hover。

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

- thirtydot

---

美丽，如果我想将hover事件添加到p:before元素上，这样当我悬停在p:before元素上时，它就会改变透明度，而不是改变段落本身，怎么办？ - android.nick

@android.nick：不幸的是，使用伪元素（如:before）无法实现该功能。 - thirtydot

+1 哦，那就是我要找的答案，谢谢！ - android.nick

Answer 2

如果您想让它在Internet Explorer中工作，只需在您的CSS中添加以下代码：

p:hover{}

就是这样。

Internet Explorer（10）的工作示例：

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

- Mustafa Ekici