jquery - 在 Hover 上通过 CSS 内容方法淡入文本

Question

我正在尝试通过 CSS 内容方法 淡入 元素上的文本，但它似乎不起作用。我的代码如下所示。这是不可能的还是可以实现的。

HTML

 <div id="share-box">
   <i class="fa fa-rss"></i>
 </div><!-- End Share Box -->

CSS

#share-box {
float: right;
height: 100px;
font-size: 72px;
width: 80px;
color: #fff;
font-weight: lighter;
padding-top: 15px;
background-color: #E18728;
padding-left: 25px;
cursor: pointer;
        }

#share-box:before {
content: 'RSS';
position: absolute;
font-size: 24px;
padding: 70px 0 0 15px;
display: none;
    }

脚本

jQuery(document).ready(function(){ 

 $("#share-box").mouseover(function(){

 $("#share-box:before").stop().fadeIn();

  });



 $("#share-box").mouseout(function(){

 $("#share-box:before").stop().fadeOut('slow');

  });

});

Link to the fiddle

Answer 1

正如@Phil 所说，您可以使用 :hover 伪类和 transition 来实现这一点。真的不需要 JS。

演示:http://jsfiddle.net/abhitalks/z3A33/

#share-box:before {
    ...
    opacity: 0; /* use opacity to get it working with transition */
    -webkit-transition: all 1s; /* use transition to get fading effect */
    transition: all 1s; /* use standards after vendor prefixes */
}
#share-box:hover::before {
    opacity: 1; /* change opacity on hover */
}

注意:您需要opacity 之类的东西才能使过渡工作。过渡不适用于 display。