How to make a div disappear on hover without it fl

I've seen answers suggesting just display: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>

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 ...

... It flickers to be short. A better option would be to use opacity, something like this:

div:hover
{
  opacity: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.