用Jquery加載時淡出。然後，在懸停時淡入淡出，用CSS

在我的博客應用程序中，當首頁加載時，我希望Twitter分享按鈕（每個博客文章一個）淡出（這樣用戶就知道他們'在那裏，但他們不會分散注意力）。當用戶懸停在帖子上時，我想讓分享按鈕淡入，然後在未展開時再次淡出。用Jquery加載時淡出。然後，在懸停時淡入淡出，用CSS

現在我使用jQuery淡出在頁面加載，並工作正常：

jQuery -> 
    $('.t-share').fadeOut(6800)

但是，我不能讓它淡入/淡出懸停/ unhover使用CSS。這很奇怪，因爲當用戶在帖子上懸停/取消懸停時，有幾個其他鏈接出現/消失，這是我用css轉換實現的。但是，當我試圖使.t-share div做同樣的事情，它不起作用。該按鈕上的display: none;屬性不會更改，但它會更改爲應該淡入的其他元素。

此外，當鼠標懸停在div上時，按鈕淡出（需要6秒鐘），I可以看到正在發生的CSS轉換（它也添加了邊框），但它會繼續消失。

這裏的CSS：

難道JS禁用CSS過渡不知何故？

在jquery淡出按鈕加載後，如何使用CSS在懸停/取消懸停時淡入/淡出按鈕？

如果不可能，JS解決方案是什麼？

來源

2012-04-16 bevanb

代表性的HTML？ [演示]（http://jsfiddle.net/）？ – 2012-04-16 23:02:47

這可能是因爲你的CSS轉換不會起作用，因爲淡出funcion設置.t-share到display: none時，它已經完全淡出（我不知道如果它）。你可能想要測試一下。

在此期間，你可以去100％的JS。這雖然不使用純粹的CSS ...

$('.t-share') 
    .mouseenter(function(){ $(this).fadeIn(200); }) 
    .mouseleave(function(){ $(this).fadeOut(200); }) 
    .fadeOut(6800);

來源

2012-04-16 23:02:09 koenpeters

fadeout在6.8秒結束後將'.t-share'設置爲'display：none'（它改變了不透明度，直到此時），但即使設置了它，它也不會退色。JS例子不會似乎沒有工作 - 它淡化了，但不會在盤旋時消退。 – bevanb 2012-04-16 23:12:15

我認爲它不會退色，因爲當它的'display'設置爲'none'時，沒有元素可以移動鼠標。可以這麼說，它不能被矇蔽。你可以試着淡化它1％，這樣它就隱藏起來了。使用fadeTo來做到這一點。 – koenpeters 2012-04-16 23:16:24

我的壞 - 忘了提及另一個元素（'.post'）觸發其中'.t-share'元素的淡入/淡出。上面的JS工作。仍然好奇爲什麼CSS解決方案無法正常工作。 – bevanb 2012-04-16 23:26:10

用Jquery加載時淡出。然後，在懸停時淡入淡出，用CSS

回答

相關問題