淡入文本通過CSS內容方法懸停

我試圖淡入元素上的文本通過CSS內容方法但它似乎並沒有工作。我的代碼如下所示。這是不可能實現的嗎？淡入文本通過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

來源

2014-06-30 Sleek Geek

如果可能，請分享小提琴嗎？ –

片刻Chirag –

爲什麼不使用'：hover'選擇器並轉換不透明度？不需要JavaScript – Phil

作爲@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。

來源

2014-06-30 07:03:25 Abhitalks

淡入文本通過CSS內容方法懸停

回答

相關問題