Css Hover Not Being Ignored On Touch-screen Devices

I've appended a div with a html button: $('.nav').append(''); The button has css properties for hover. My problem is that when

Solution 1:

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:

htmla { color:#222; }

html.no-toucha:hover { color:#111; }

Solution 2:

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

Solution 3:

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)

Solution 4:

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