How to make a div disappear on hover without it flickering when the mouse moves?

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>

c-smile

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.

来源：https://stackoverflow.com/questions/5844622/how-to-make-a-div-disappear-on-hover-without-it-flickering-when-the-mouse-moves

标签

css

hover

hide

visibility

opacity