1

モバイル デバイスのみで hover および active 疑似クラスを無効にすることはできますか?

私はこれを見つけました

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

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

これはかなりきれいに見えます。しかし、私はそれを機能させることができません。

コードは以下にあり、ここでテストできます: 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>

編集

今これ使ってる

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

と

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

escapethis という単語を使用する行は、スペースで始めることはできません

4

1 に答える 1

2

あらゆる種類の機能テストを実行し、それらのテストの結果に基づいて要素にクラスを追加するmodernizrのような機能検出ライブラリで使用されているようhtml.touchに聞こえます。html.no-touchhtml

その場合、次のようなことをしたいと思うでしょう：

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

<div id="ElementThatShouldHaveNoHoverEventOnTouchDevices">
    hello
</div>
于 2012-05-18T20:59:14.357 に答える