How to make a div disappear on hover without it flickering when the mouse moves?
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>
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)