[whatwg] sticky css hover state on touch devices

[Zac Spitzer]

on touch devices, there is a problem with sticky hover states

https://bugs.webkit.org/show_bug.cgi?id=158517
https://bugs.chromium.org/p/chromium/issues/detail?id=370155

one workaround it to clone, remove and re-insert the element
http://stackoverflow.com/a/31691425

my question is, should an element retain it's hover state when hidden?

if it didn't, an easy workaround for this problem is to set display:none;
and then display:block;...

aka jquery $(el).hide().show()

[Ashley Sheridan]

Post by Zac Spitzer
on touch devices, there is a problem with sticky hover states
https://bugs.webkit.org/show_bug.cgi?id=158517
https://bugs.chromium.org/p/chromium/issues/detail?id=370155
one workaround it to clone, remove and re-insert the element
http://stackoverflow.com/a/31691425
my question is, should an element retain it's hover state when hidden?
if it didn't, an easy workaround for this problem is to set
display:none;
and then display:block;...
aka jquery $(el).hide().show()

Surely you're better off setting a focus state, as that takes priority (at least in all browsers where I've seen this problem.) The hover and focus states should be different as they're meant to visually indicate different things to the end user.

There are browsers out there with joint touch and mouse capabilities too (e.g. Surface, any touch screen added to desktop OS's, and Android with a mouse plugged in, etc) where you wouldn't want to break hover state like you propose.

Thanks,
Ash