如何让鼠标在悬停时消失而不会在鼠标移动时闪烁？

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

如何让鼠标在悬停时消失而不会在鼠标移动时闪烁？

回答

相关问题