为什么选择器 :before:hover 不起作用？

Question

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

Answer 1

您需要

p:before:hover

，而不是

p:hover:before

。

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

Answer 2

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

p:hover{}

仅此而已。

Internet Explorer 的工作示例（10）：

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