Touch device HTML element :hover state

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 se开发者_开发问答lector "html.no-touch button:hover" will not match for touch device.

Do you know more elegant solutions you may suggest?

I would try to overwrite the :hover state in an additional style-sheet for handheld devices like:

<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld">

and in handheld.css put something like:

#some_selector:hover {
    background: none;    /* if you are setting a background in the main css file for example */
}

However, I´m not sure if handheld and touch screen are completely the same, there might be devices that have a touch screen and are not qualified as a handheld.

Edit: It seems you cannot detect touch screen devices 100% reliably, also see this question.

Seems that this issue can be resolved by overwriting the :hover state for a given element in media query - see this question:

CSS hover not being ignored on touch screen devices