There is a HTML button, with 3 backgrounds - each for normal, hover and clicked states. Of course, it works fine with non touch device. If the button is clicked on touch device, the :hover state is also triggered and stays until another element is touched.
Is it possible to programmatically remove :hover state from element after it was clicked or prevent it from activating on touch devices?
Sorry, but suggestions to a detect mouseover and mouseout events and add artificial classes are not accepted.
One possible solution is to add "no-touch" class to html element in advance and remove it if only touch device is detected. In that case, CSS selector "html.no-touch button:hover" will not match for touch device.
Do you know more elegant solutions you may suggest?
:hover
? As in, for some reason:hover
just not being used is an issue, since it seems to me the other two states should work just fine. – G Gordon Worley III:hover
since you can't actually hover over an element anyway. – G Gordon Worley III