简单的css：之前：悬停不起作用？ CSSlint没有错误？

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

编辑：我正在使用Chrome。

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/