Css 如何在鼠标移动时使div在悬停时消失而不闪烁？_Css_Hover_Hide_Visibility_Opacity

Css 如何在鼠标移动时使div在悬停时消失而不闪烁？

css

Css 如何在鼠标移动时使div在悬停时消失而不闪烁？,css,hover,hide,visibility,opacity,Css,Hover,Hide,Visibility,Opacity,我看到一些答案建议在：hovercss上显示display:none。但这会使div在鼠标移动时闪烁编辑：添加显示：无将元素从渲染树中取出，因此它将立即丢失：悬停状态，然后重新出现并获取：再次悬停、消失、重新出现等您需要的是： #elem{opacity:0；filter:alpha（opacity=0）；} 它将使该位置空着，因此不会出现闪烁（或）如果您有以下内容： div:hover { display:none; } div:hover { opacity:0; } 那么

我看到一些答案建议在

：hover

css上显示

display:none

。但这会使div在鼠标移动时闪烁

编辑：添加显示：无将元素从渲染树中取出，因此它将立即丢失

：悬停状态，然后重新出现并获取：再次悬停、消失、重新出现等
您需要的是：
#elem{opacity:0；filter:alpha（opacity=0）；}

它将使该位置空着，因此不会出现闪烁（或）
如果您有以下内容：
div:hover
{
  display:none;
}

div:hover
{
  opacity:0;
}

那么你就没有办法避免闪烁。
启用：悬停元素变为不可见，因此不再悬停，并再次显示。
一旦它出现：再次悬停并
启用：悬停元素变为不可见，因此不再悬停，并再次显示。
一旦它出现：再次悬停并
启用：悬停元素变为不可见，因此不再悬停，并再次显示。
一旦它出现：再次悬停并
启用：悬停元素变为不可见，因此不再悬停，并再次显示。
一旦它出现：再次悬停并
启用：悬停元素变为不可见，因此不再悬停，并再次显示。
一旦它出现：再次悬停并
。。。
它忽隐忽现地变短了。
更好的选择是使用不透明度，如下所示：
div:hover
{
  display:none;
}

div:hover
{
  opacity:0;
}

可选使用CSS3，但仅适用于最新浏览器（不包括IE）。
编辑：下面是一个使用jquery和CSS3的示例@
<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>


CSS3悬停
#盘旋{
宽度：100px；
高度：100px；
背景色：#000000；
-webkit过渡：不透明度0.2秒；
-moz过渡：不透明度0.2s；
-o-过渡：不透明度0.2s；
}
#悬停{
//红色（0-255）、蓝色（0-255）、绿色（0-255）、阿尔法（0-1）
背景色：rgba（100100,0）；
不透明度：0；
}
将鼠标悬停在对象上时，使用javascript在对象上设置一个类（例如不可见）。然后使用css显示：当对象具有不可见的类时为无。由于它不再存在，您必须检查鼠标坐标（或使用另一个元素鼠标悬停事件）以删除该类并重置不可见的类。
请发布导致此问题的确切html和css，最好将其放在一个文件夹中。您是否同意使用jQuery？下面是一个示例：谢谢Jared，我也添加了一个。所有三个示例（可见性、显示、不透明度）：哦，是的，我没有提到JS方法可以跨浏览器工作，CSS3不能与IE一起工作；）