如何讓鼠標在懸停時消失而不會在鼠標移動時閃爍？

10

display:none將採取元素進行渲染樹的，所以它會立即失去:hover狀態，然後又重新出現，並再次得到:hover，消失，再次出現，等等

什麼你需要是：

#elem { opacity:0; filter:alpha(opacity=0); }

它會離開這個地方空的，所以沒有閃爍會出現。 （Demo或yours updated）

來源

2011-04-30 21:12:58 galambalazs

+5

所有三個示例（可見性，顯示，不透明度）：http://jsfiddle.net/userdude/VvsG2/4/ – 2011-04-30 21:27:57

0

如果你有這樣的事情：

div:hover 
{ 
    display:none; 
}

那麼有沒有辦法讓你避免閃爍。 On：懸停元素變得不可見，因此它不再被徘徊，並且它再次出現。只要它出現它得到：再次懸停和...

上：懸停的元素變得不可見，因此它不再徘徊，它再次出現。只要它出現它得到：再次懸停和...

... 它閃爍的短。一個更好的選擇是使用不透明，這樣的事情：

div:hover 
{ 
    opacity:0; 
}

來源

2011-04-30 21:15:21

1

與CSS3

可選的，但只能在（不包括IE）的最新瀏覽器。編輯：這是一個使用jQuery和CSS3的示例@jsfiddle。

<html> 
<head> 
    <title>CSS3 hover</title> 
<style type="text/css"> 
#hover{ 
    width:100px; 
    height:100px; 
    background-color:#000000; 
    -webkit-transition:opacity 0.2s ease; 
    -moz-transition:opacity 0.2s ease; 
    -o-transition:opacity 0.2s ease; 
} 
#hover:hover{ 
    // Red(0-255), Blue(0-255), Green(0-255), Alpha (0-1) 
    background-color:rgba(100,100,100,0); 
    opacity:0; 
} 
</style> 
</head> 
<body> 
    <div id="hover"></div> 
</body> 
</html>

來源

2011-04-30 23:04:43 robx

+0

+1的過渡效果。太酷了！ – aph 2011-05-01 17:03:59

+0

哦，是的，我沒有提到JS方法可以跨瀏覽器工作，CSS3將無法使用IE瀏覽器;） – robx 2011-05-01 17:55:46

0

使用javascript在對象懸停時設置類（例如不可見）。然後使用CSS來顯示：當對象具有不可見的類時，無。由於它不再存在，您將不得不檢查鼠標座標（或使用另一個元素鼠標懸停事件）來移除該類並重置不可見類。

來源

2016-06-20 20:30:38 ejectamenta

如何讓鼠標在懸停時消失而不會在鼠標移動時閃爍？

回答

相關問題