Last Updated: February 25, 2016
·
14.74K
· dannygarcia

Ignore hover events with CSS

The pointer-events CSS property will allow you to control under what circumstances (if any) a particular graphic element can become the target of mouse events. (<a href="https://developer.mozilla.org/en/CSS/pointer-events/">source</a>).

This is a great way to build CSS tooltips that hide when moused over.

.tooltip {
    /* Prevents .tooltip from receiving pointer events. */
    pointer-events: none;
}

<a href="http://jsfiddle.net/D75pb/">jsFiddle Demo</a>