css - 为移动设备禁用悬停和事件伪类

标签 css mobile hover

是否可以仅针对移动设备禁用悬停和事件伪类?

我找到了

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这个词的行不能以空格开头

最佳答案

html.touchhtml.no-touch 之类的声音正在与类似 modernizr 的特征检测库一起使用,它将进行各种功能测试,并根据这些测试的结果将类添加到 html 元素。

在那种情况下,你会想做这样的事情:

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

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

关于css - 为移动设备禁用悬停和事件伪类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10659577/

相关文章:

java - 让轨迹球在Android java中按代码发光

html - IE7/8 : div loses :hover if mouse moves over an iframe which is inside the div!

javascript - 列表项事件悬停效果

html - float :right and css hover 的奇怪行为

javascript - 如何创建响应式菜单(汉堡菜单)

php - 页脚后额外的 1px 白线?

html - 嵌入式 youtube 视频破坏了我固定的左栏导航菜单

css - 根据字体大小有条件地使用网络字体

javascript - 在线程休眠方面,移动设备网络浏览器是否有任何标准?

javascript - @media 屏幕在 JavaScript 中?