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

Question

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

csshoverhidevisibilityopacity

10

我看到有些答案建议在 :hover css 上只使用 display:none。但这会导致鼠标移动时 div 闪烁。

编辑：添加了 jsfiddle。

- aph

请将导致这个问题的确切HTML和CSS代码发布出来，最好放在http://jsfiddle.net/上。 - Jared Farrish

你是否愿意使用jQuery？ - Thomas Shields

这是一个例子：http://jsfiddle.net/userdude/VvsG2/ - Jared Farrish

谢谢Jared，我也刚刚添加了一个。 - aph

4个回答

1

可以选择使用CSS3，但仅适用于最新的浏览器（不包括IE）。编辑：这里有一个例子@jsfiddle同时使用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>

- robx

哦，是的，我没有提到JS方法可以在各种浏览器中使用，而CSS3不能在IE中使用 ;) - robx

1

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

- ejectamenta

0

如果你有类似这样的东西：

div:hover
{
  display:none;
}

那么你就无法避免闪烁了。在:hover时，元素变得不可见，因此它不再被悬停，并再次出现。一旦它出现，它又被:hover了...

在:hover时，元素变得不可见，因此它不再被悬停，并再次出现。一旦它出现，它又被:hover了...

... 它会闪烁一下。更好的选择是使用opacity，像这样：

div:hover
{
  opacity:0;
}

- c-smile

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gblazex · Accepted Answer

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

您需要的是：

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

它会使位置为空，因此不会出现闪烁。(演示 或者 您自己的更新版本)