Question

我看到display:none css上只有:hover的答案。但是当鼠标移动时，这会使div闪烁。

编辑：已添加jsfiddle

Answer 1

display:none会将该元素从渲染树中移出，因此它会立即失去:hover状态，然后重新出现并再次获得:hover，消失，重新出现等......

您需要是：

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

它会将该地点留空，因此不会出现闪烁。 （Demo 或 yours updated）

Answer 2

可选择使用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>

Answer 3

如果你有这样的事情：

div:hover
{
  display:none;
}

然后你无法避免闪烁。开：悬停元素变得不可见，因此它不再悬停，它再次出现。一旦它出现它就会：再次悬停......

开：悬停元素变得不可见，因此它不会再悬停，它会再次出现。一旦它出现它就会：再次悬停......

... 它变得很短暂。更好的选择是使用不透明度，如下所示：

div:hover
{
  opacity:0;
}

Answer 4

使用javascript在悬停时设置对象上的类（例如，不可见）。然后使用css在对象具有该不可见类时显示：none。由于它不再存在，你将不得不检查鼠标坐标（或使用另一个元素鼠标悬停事件）来删除该类并重置不可见的类。

当鼠标移动时，如何让div在没有闪烁的情况下消失？

4 个答案: