Search code examples
csshoverhidevisibilityopacity

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

Solution

  • 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)