4

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?

Zygimantas
  • 6,047
  • 7
  • 36
  • 51
  • Are we to assume that you can't just get by without `: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 Apr 14 '11 at 22:43
  • Ignoring :hover support, will make a web application a little bit less interactive for users without touch devices. In case no reliable solution will be found, this requirement will be removed, because :hover on touch device creates even more visual problems. – Zygimantas Apr 14 '11 at 23:18
  • 2
    Interesting. I would have expected mobile browsers to just ignore `:hover` since you can't actually hover over an element anyway. – G Gordon Worley III Apr 14 '11 at 23:32

2 Answers2

1

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.

Community
  • 1
  • 1
jeroen
  • 88,615
  • 21
  • 107
  • 128
0

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

Community
  • 1
  • 1
bzx
  • 1,325
  • 11
  • 10