Home/ Questions/Q 7954345
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T03:24:10+00:00

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

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0