我附加了一个带有 html 按钮的 div:
$('.nav').append('<button class="restart">Restart</button>');
该按钮具有用于悬停的 css 属性。我的问题是,当点击触摸屏设备上的按钮时,按钮会保持悬停状态,直到点击另一个元素。
使用触摸屏设备浏览时,有什么方法可以忽略悬停属性?
我最近遇到了这个确切的问题,iOS 似乎将悬停伪视为额外点击,因此链接需要点击两次等。
如果您使用modernizr,您可以通过应用于html标签的.no-touch类应用您的:hover psuedos。
所以:
html a { color:#222; }
html.no-touch a:hover { color:#111; }
不是一个理想的解决方案,但感谢@dualed 的领先!
@media screen and (min-device-width:768px) and (max-device-width:1024px) /*catch touch screen devices */
{
button.restart:hover
{
/* replicate 'up' state of element */
}
}
您可以在 CSS 规则中指定媒体类型。
@media handheld {
button.restart:hover {
/* undo hover styling */
}
}
但是,请注意,手持设备不一定有触摸屏。
(顺便说一句。这是 CSS 而不是 jQuery)
也许这不是您想要的,但您可以根据媒体指定不同的 css 样式表:
<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">
在上面的示例中,main.css 将用于计算机屏幕,但对于手持设备,它将是 smallscreen.css
一种不错且简单的方法是使用Modernizr。
当 Modernizr 运行时,它会在它检测到的每个功能的 HTML 标记的 class 属性中添加一个条目,如果浏览器不支持,则在该功能前面加上 no-。
现在将以下行添加到您的 css 样式表
.touch *:hover {
display: none;
}
并随意使用 :hover 任意多次。当您在触摸屏中查看您的网站时,所有元素的悬停效果都将被禁用。