How to make a div disappear on hover without it flickering when the mouse moves?
I've seen answers suggesting just displa开发者_Python百科y:none on the :hover css. But that makes the div flicker when the mouse is moving.
EDIT: Added jsfiddle
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...
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)
Optionally with CSS3, but will only work on latest browsers (excluding IE). Edit: Here is an example @ jsfiddle using both jquery and 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>
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.
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;
}
加载中,请稍侯......
精彩评论