触摸屏设备上的 CSS 悬停不会被忽略 [英] CSS hover not being ignored on touch-screen devices

问题描述

我添加了一个带有 html 按钮的 div:

I've appended a div with a html button:

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

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

The button has css properties for hover. My problem is that when tapping the button on a touch-screen device, the button retains its hover state until another element is tapped.

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

Is there any way that the hover property can be ignored when browsing with a touch-screen device?

推荐答案

不是一个理想的解决方案，但感谢@dualed 的领先！

Not an ideal solution, but thanks @dualed for the headstart!

@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 悬停不会被忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！