I've seen answers suggesting just display:none on the :hover css. But that makes the div flicker when the mouse is moving.
我已经看到答案建议只显示：没有：hover css。但是当鼠标移动时，这会使div闪烁。
EDIT: Added jsfiddle
编辑：添加了jsfiddle
4 个解决方案
#1
11
display:none will take the element out of the render tree, so it loses :hover state immediately, then reappears and gets :hover again, disappears, reappears, etc...
display：none将该元素从渲染树中取出，因此它会丢失：立即悬停状态，然后重新出现并获取：再次悬停，消失，重新出现等等...
What you need is:
你需要的是：
#elem { opacity:0; filter:alpha(opacity=0); }
It will leave the place empty, so no flickering will appear. (Demo or yours updated)
它将使该位置为空，因此不会出现闪烁。 （演示或你的更新）
#2
1
Optionally with CSS3, but will only work on latest browsers (excluding IE). Edit: Here is an example @ jsfiddle using both jquery and CSS3.
可选择使用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>
#3
0
If you have something like this:
如果您有这样的事情：
div:hover
{
display:none;
}
Then there is no way for you to avoid flickering. On :hover the element becomes invisible so it is not hovered anymore and it appears again. As soon as it appears it is getting :hover again and ...
那你就没办法避免闪烁。开：悬停元素变得不可见，因此它不再悬停，它再次出现。一旦它出现它就会：再次悬停......
On :hover the element becomes invisible so it is not hovered anymore and it appears again. As soon as it appears it is getting :hover again and ...
开：悬停元素变得不可见，因此它不再悬停，它再次出现。一旦它出现它就会：再次悬停......
On :hover the element becomes invisible so it is not hovered anymore and it appears again. As soon as it appears it is getting :hover again and ...
开：悬停元素变得不可见，因此它不再悬停，它再次出现。一旦它出现它就会：再次悬停......
On :hover the element becomes invisible so it is not hovered anymore and it appears again. As soon as it appears it is getting :hover again and ...
开：悬停元素变得不可见，因此它不再悬停，它再次出现。一旦它出现它就会：再次悬停......
On :hover the element becomes invisible so it is not hovered anymore and it appears again. As soon as it appears it is getting :hover again and ...
开：悬停元素变得不可见，因此它不再悬停，它再次出现。一旦它出现它就会：再次悬停......
... It flickers to be short. A better option would be to use opacity, something like this:
......它很短暂。更好的选择是使用不透明度，如下所示：
div:hover
{
opacity:0;
}
#4
0
Use javascript to set a class (eg. invisible) on the object when hovered over. Then use css to display:none when the object has that invisible class. Since it doesn't exist anymore you will have to check mouse coordinates (or use another element mouse hover event) to remove the class and reset the invisible class.
在悬停时，使用javascript在对象上设置类（例如，不可见）。然后使用css在对象具有该不可见类时显示：none。由于它不再存在，您将不得不检查鼠标坐标（或使用其他元素鼠标悬停事件）来删除该类并重置不可见的类。
#1
11
display:none will take the element out of the render tree, so it loses :hover state immediately, then reappears and gets :hover again, disappears, reappears, etc...
display：none将该元素从渲染树中取出，因此它会丢失：立即悬停状态，然后重新出现并获取：再次悬停，消失，重新出现等等...
What you need is:
你需要的是：
#elem { opacity:0; filter:alpha(opacity=0); }
It will leave the place empty, so no flickering will appear. (Demo or yours updated)
它将使该位置为空，因此不会出现闪烁。 （演示或你的更新）
#2
1
Optionally with CSS3, but will only work on latest browsers (excluding IE). Edit: Here is an example @ jsfiddle using both jquery and CSS3.
可选择使用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>
#3
0
If you have something like this:
如果您有这样的事情：
div:hover
{
display:none;
}
Then there is no way for you to avoid flickering. On :hover the element becomes invisible so it is not hovered anymore and it appears again. As soon as it appears it is getting :hover again and ...
那你就没办法避免闪烁。开：悬停元素变得不可见，因此它不再悬停，它再次出现。一旦它出现它就会：再次悬停......
On :hover the element becomes invisible so it is not hovered anymore and it appears again. As soon as it appears it is getting :hover again and ...
开：悬停元素变得不可见，因此它不再悬停，它再次出现。一旦它出现它就会：再次悬停......
On :hover the element becomes invisible so it is not hovered anymore and it appears again. As soon as it appears it is getting :hover again and ...
开：悬停元素变得不可见，因此它不再悬停，它再次出现。一旦它出现它就会：再次悬停......
On :hover the element becomes invisible so it is not hovered anymore and it appears again. As soon as it appears it is getting :hover again and ...
开：悬停元素变得不可见，因此它不再悬停，它再次出现。一旦它出现它就会：再次悬停......
On :hover the element becomes invisible so it is not hovered anymore and it appears again. As soon as it appears it is getting :hover again and ...
开：悬停元素变得不可见，因此它不再悬停，它再次出现。一旦它出现它就会：再次悬停......
... It flickers to be short. A better option would be to use opacity, something like this:
......它很短暂。更好的选择是使用不透明度，如下所示：
div:hover
{
opacity:0;
}
#4
0
Use javascript to set a class (eg. invisible) on the object when hovered over. Then use css to display:none when the object has that invisible class. Since it doesn't exist anymore you will have to check mouse coordinates (or use another element mouse hover event) to remove the class and reset the invisible class.
在悬停时，使用javascript在对象上设置类（例如，不可见）。然后使用css在对象具有该不可见类时显示：none。由于它不再存在，您将不得不检查鼠标坐标（或使用其他元素鼠标悬停事件）来删除该类并重置不可见的类。