jquery - 触摸屏设备上的 CSS 悬停不会被忽略

Question

我附加了一个带有 html 按钮的 div：

$('.nav').append('<button class="restart">Restart</button>');

该按钮具有用于悬停的 css 属性。我的问题是，当点击触摸屏设备上的按钮时，按钮会保持悬停状态，直到点击另一个元素。

使用触摸屏设备浏览时，有什么方法可以忽略悬停属性？

Answer 1

我最近遇到了这个确切的问题，iOS 似乎将悬停伪视为额外点击，因此链接需要点击两次等。

如果您使用modernizr，您可以通过应用于html标签的.no-touch类应用您的:hover psuedos。

所以：

html a { color:#222; }

html.no-touch a:hover { color:#111; }

Answer 2

不是一个理想的解决方案，但感谢@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 */
    }
}

Answer 3

您可以在 CSS 规则中指定媒体类型。

@media handheld {
  button.restart:hover {
    /* undo hover styling */
  }
}

但是，请注意，手持设备不一定有触摸屏。

（顺便说一句。这是 CSS 而不是 jQuery）

Answer 4

也许这不是您想要的，但您可以根据媒体指定不同的 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

Answer 5

一种不错且简单的方法是使用Modernizr。

当 Modernizr 运行时，它会在它检测到的每个功能的 HTML 标记的 class 属性中添加一个条目，如果浏览器不支持，则在该功能前面加上 no-。

现在将以下行添加到您的 css 样式表

.touch *:hover {
    display: none;
}

并随意使用 :hover 任意多次。当您在触摸屏中查看您的网站时，所有元素的悬停效果都将被禁用。