CSS hover not being ignored on touch-screen devices

Question

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?

Do you have the attribute `type="button"`? If not, the button becomes a submit button by default. — Patrick James McDougle, Dec 18 '12 at 15:45
@Neal Yes it is, look at the spec. http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html "The missing value default is the Submit Button state." — Patrick James McDougle, Dec 18 '12 at 15:47
I am just trying to tell this person that they are going to have other fish to fry if they don't want this button to submit to the current page. — Patrick James McDougle, Dec 18 '12 at 15:49
@PatrickJamesMcDougle why would it submit if there is no form?! — Naftali, Dec 18 '12 at 15:51
To be fair, the element with class 'restart' doesn't necessarily need to be a button, an anchor would do the same job but I'm getting the same problem with an anchor too. — richhastings, Dec 18 '12 at 16:11
@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, Dec 18 '12 at 16:17

score 5 · Answer 1 · answered Dec 18 '12 at 15:48

5

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; }

answered Dec 18 '12 at 15:48

Wayne Austin

2,979
3
25
30

Here is the iOS documentation about how events are triggered on clickable elements: http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7 – Patrick James McDougle Dec 18 '12 at 16:06

score 3 · Accepted Answer · answered Dec 18 '12 at 16:55

3

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 */
    }
}

answered Dec 18 '12 at 16:55

richhastings

253
2
11

What about smaller laptops (e.g. MS surface) where a mouse is plugged in in portrait? This is a sub-ideal method. – dudewad May 14 '15 at 22:20

score 1 · Answer 3 · answered Dec 18 '12 at 16:19

1

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)

answered Dec 18 '12 at 16:19

dualed

10,262
1
26
29

Handheld doesn't work too well, but by specifying device-width in the query, I've got a solution. – richhastings Dec 18 '12 at 16:59
@rhastings that might work, but may have other side-effects. You may have to specify exact device sizes. Sadly the mozilla `-moz-touch-enabled` has no equivalent implementations on webkit. Also, I assume we are talking about the i-range of mobile products, look here http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safaricssref/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3 – dualed Dec 18 '12 at 17:30

score 0 · Answer 4 · answered Dec 18 '12 at 15:49

0

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

answered Dec 18 '12 at 15:49

Slauster

99
1

correct, though almost all touch devices currently report themselves as 'screen', not handheld. – Design by Adrian Feb 10 '13 at 17:04

score -2 · Answer 5 · answered Aug 08 '13 at 13:16

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.

Also, * in css is *incredibly* inefficient. However, this technique should work, from the technical standpoint. — dudewad, May 14 '15 at 22:20

CSS hover not being ignored on touch-screen devices

5 Answers5

Linked