CSS hover not being ignored on touch-screen devices

7
votes

I've appended a div with a html button:

$('.nav').append('<button class="restart">Restart</button>');

The button has css properties for hover. My problem is that when tapping the button on a touch-screen device, the button retains its hover state until another element is tapped.

Is there any way that the hover property can be ignored when browsing with a touch-screen device?

5
jqueryhtmlbuttonhovertouch
Do you have the attribute type="button"? If not, the button becomes a submit button by default. – Patrick James McDougle
@PatrickJamesMcDougle that is not true at all. A submit button for what?! – Naftali
@Neal Yes it is, look at the spec. whatwg.org/specs/web-apps/current-work/multipage/… "The missing value default is the Submit Button state." – Patrick James McDougle
When was submitting a form ever mentioned in any way? – harman_kardon
@PatrickJamesMcDougle You are wrong. A button submits its form. If a button is not in a form, it can not submit it since there is no "default form" that could be submitted. So it will not do anything. – dualed

5 Answers

4
votes

I came across this exact problem recently, iOS seems to consider the hover psuedo as an additional click, so links will needs clicking twice etc.

If you use modernizr you can apply your :hover psuedos through the .no-touch class which is applied to the html tag.

so:

html a { color:#222; }

html.no-touch a:hover { color:#111; }
3
votes

Not an ideal solution, but thanks @dualed for the headstart!

@media screen and (min-device-width:768px) and (max-device-width:1024px) /*catch touch screen devices */
{
    button.restart:hover
    {
        /* replicate 'up' state of element */
    }
}
1
votes

You can specify the media type in your CSS rules.

@media handheld {
  button.restart:hover {
    /* undo hover styling */
  }
}

However, note that hand held devices do not necessarily have a touch screen.

(Btw. this is CSS not jQuery)

0
votes

Maybe that's not what you want, but you can specify different css stylesheets depending on the media :

 <link rel="stylesheet" media="screen,projection,tv" href="main.css" type="text/css">
 <link rel="stylesheet" media="print" href="print.css" type="text/css">
 <link rel="stylesheet" media="handheld" href="smallscreen.css" type="text/css">

in above example, main.css will be used for computer screens but for a handeld device, it will be smallscreen.css

-2
votes

One nice and easy way is using Modernizr.

When Modernizr runs, it will add an entry in the class attribute of the HTML tag for every feature it detects, prefixing the feature with no- if the browser doesn’t support it.

Now add following lines to your css stylesheet

.touch *:hover {
    display: none;
}

And freely use :hover as many times as you like. When your site is viewed in touch screens hover effect of all elements will be disabled.