如何让 div 在悬停时消失而不会在鼠标移动时闪烁？
Posted
技术标签:
【中文标题】如何让 div 在悬停时消失而不会在鼠标移动时闪烁？【英文标题】：How to make a div disappear on hover without it flickering when the mouse moves? 【发布时间】：2011-08-16 05:19:40 【问题描述】：我在:hover css 上看到了建议display:none 的答案。但这会使 div 在鼠标移动时闪烁。
编辑：添加jsfiddle
【问题讨论】：
请发布给你这个问题的确切的 html 和 css，最好把它放在jsfiddle.net 你可以使用 jQuery 吗？ 这是一个例子：jsfiddle.net/userdude/VvsG2 谢谢 Jared，我也加了一个。 【参考方案1】：display:none 会将元素从渲染树中取出，因此它会立即失去:hover 状态，然后重新出现并再次获得:hover，然后消失、重新出现等等......
你需要的是：
#elem opacity:0; filter:alpha(opacity=0);
它将使该位置为空，因此不会出现闪烁。 (Demo 或 yours updated)
【讨论】：
所有三个示例（可见性、显示、不透明度）：jsfiddle.net/userdude/VvsG2/4【参考方案2】：当鼠标悬停在对象上时，使用 javascript 在对象上设置一个类（例如不可见）。然后在对象具有该不可见类时使用 css 显示：无。由于它不再存在，您将不得不检查鼠标坐标（或使用另一个元素鼠标悬停事件）来删除该类并重置不可见的类。
【讨论】：
【参考方案3】：如果你有这样的事情：
div:hover
display:none;
那么你没有办法避免闪烁。 On :hover 元素变得不可见，因此它不再悬停并再次出现。 一旦它出现，它就会 :hover again and ...
On :hover 元素变得不可见，因此它不再悬停并再次出现。 一旦它出现，它就会 :hover again and ...
On :hover 元素变得不可见，因此它不再悬停并再次出现。 一旦它出现，它就会 :hover again and ...
On :hover 元素变得不可见，因此它不再悬停并再次出现。 一旦它出现，它就会 :hover again and ...
On :hover 元素变得不可见，因此它不再悬停并再次出现。 一旦它出现，它就会 :hover again and ...
... 它闪烁短。 更好的选择是使用不透明度，如下所示：
div:hover
opacity:0;
【讨论】：
【参考方案4】：可选择使用 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>
【讨论】：
哦，是的，我没有提到 JS 方法可以跨浏览器工作，CSS3 不能在 IE 上工作 ;)以上是关于如何让 div 在悬停时消失而不会在鼠标移动时闪烁？的主要内容，如果未能解决你的问题，请参考以下文章
如何让带有 z-index 的 div 在悬停时覆盖另一个 div