CODEWITHSUNDEEP
cssmobilehover
wubbewubbewubbe
wubbewubbewubbe

Reputation: 741

disable hover and active pseudo class for mobile devices

Is it possible to disable the hover and active pseudo classes for mobile devices only?

I've found this

html.touch {
  /* Touch is enabled */
}

html.no-touch {
  /* Touch is disabled */
}

Which seems pretty neat. But I can't get it to work.

The code is below, and you can test it here: http://jsfiddle.net/5qb2J/

<html>
<head>
<style type="text/css">
#button{background:url("http://www.webstuffshare.com/wp-content/uploads/2010/03/button3.jpg") no-repeat 0 0;display:block;width:201px;height:67px;}
#button:hover{background-position:0px -67px;}
#button:active{background-position:0px -134px;}
#button span{position:absolute;top:-99999999em;}
</style>    
</head>
<body>
<a id="button" href="#"><span>this is foo</span></a>
</body>
</html>

edit

I'm using this now

<?php // detect mobile
$Mobile = FALSE;
if
(strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "android") ||
strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "webos") ||
strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "iphone") ||
strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "ipod") ||
strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "ipad") ||
strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "zune"))
{
$Mobile = TRUE;
}
?>

and

<?php
If ($Mobile == FALSE)
{
echo <<<escapethis
some html here
escapethis;
}
?>

the lines that use the word escapethis can not begin with a space

Upvotes: 1

Views: 4526

Answers (1)

Chris Sobolewski
Chris Sobolewski

Reputation: 12925

Sounds like html.touch and html.no-touch are being used with a feature detection library like modernizr, which will do all sorts of feature testing and add classes to the html element based on the results of those tests.

In that case, you would want to do something like this:

html.no-touch #ElementThatShouldHaveNoHoverEventOnTouchDevices:hover{
    //do your stuff
}

<div id="ElementThatShouldHaveNoHoverEventOnTouchDevices">
    hello
</div>

Upvotes: 2

Related Questions