aph aph - 5 months ago 24
CSS Question

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

Answer

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)