简单css：之前：hover不工作？ CSSlint没有错误？ [英] Simple css :before:hover not working? CSSlint no errors?

问题描述

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。

解决方案

而不是 p：before：hover ，需要 p：hover：

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

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

This should be really simple, I just don't understand why it's not working. When hovering over the :before it should change it's opacity to 1, but it doesn't. Why?

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

EDIT: I'm using Chrome.

解决方案

Instead of p:before:hover, you need p:hover:before.

See: http://jsfiddle.net/k93ZK/3/

这篇关于简单css：之前：hover不工作？ CSSlint没有错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！