Question

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

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

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

使用触摸屏设备浏览时是否有任何方法可以忽略悬停属性？

Answer 1

我最近遇到了这个确切的问题，iOS似乎认为悬停psuedo是一个额外的点击，所以链接需要点击两次等。

如果你使用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将用于计算机屏幕，但对于handeld设备，它将是smallscreen.css

Answer 5

一种简单易用的方法是使用Modernizr。

当Modernizr运行时，它将在HTML的class属性中添加一个条目它检测到的每个功能的标记，如果是浏览器，则为功能添加前缀不支持它。

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

.touch *:hover {
    display: none;
}

自由使用：随心所欲地悬停多次。在触摸屏中查看您的网站时，将禁用所有元素的悬停效果。

在触摸屏设备上不会忽略CSS悬停

5 个答案: