在触摸屏设备上不会忽略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 */
    }
}