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一起使用。

在Hover上通过CSS内容方法淡出文本

1 个答案: