So, it seems upon first hearing about mouseover
events one might want to use them to add extra functionality to a website. For example, reveal some extra details on hover, or trigger an animation.
Further, one might assume (as I did) that a click
without a previous mouseover
is what must happen on a mobile device seeing as there is no mouse.
But mobile browsers (Safari on iOS) will actually trigger a mouseover immediately before a click
. So any chance of doing something useful during a mouseover
is now pointless.
So, we don't want to take an action (display/animate something) during mouseover, as on mobile devices this event occurs immediately before a click.
And we can't use the existence of a mouseover event as an indicator that the user has a mouse.
So when, realistically, is it safe to use a mouseover event, and for what purposes?
My advice is to never make an "actionable" popover rely on a mouseover, and that buttons/links should always look clickable without relying on a mouseover/hover effect.
If a popover contains a button or form field, or is otherwise essential to the function of the website, it should be triggered by clicking to ensure that it is accessible on all devices. I typically only use mouseover events to show informational tooltips and for additional (but not strictly necessary) styling on clickable elements. If info tooltips are needed on a mobile device, they can still be clickable.
So what are they good for? Ecommerce sites often benefit from hover "quick views" to show extra product images that could also be accessed by clicking on the item. Hover styles/animations are aesthetically pleasing when they reinforce the overall feel of the website and behave consistently throughout the design system, as in Google's Material Design.