Javascript 禁用手持设备上的悬停事件

我的网站上有一些奇特的悬停动画。我想在平板电脑和手机等手持设备上禁用它们

我知道我可以使用“最小/最大宽度”来实现这一点，但我希望在桌面上的浏览器中保持所有视口大小的效果。我不希望它出现在手机/平板电脑上的原因很简单，因为没有鼠标…因此…悬停效果不会像我想要的那样转换

我已经看到，您可以检测特定的用户代理样式表？或者有一些脚本可以实现这一点？我找到了一些，但解释得不太清楚

“现代化者”不能做到这一点，是吗？我这样问是因为我在研究的时候在一篇帖子里看到了它

---

提前感谢：）

您可以使用JS和类来完成

HTML:

当屏幕宽度小于目标设备宽度时，向元素添加

.nohover

。在这种情况下是500px

window.onresize = function() {
    if (window.innerWidth < 500) {
        document.getElementById("link").className = "nohover";
    } else {
        document.getElementById("link").className = "";
    }
}

window.onresize=function（）{
如果（窗内宽度<500）{
document.getElementById（“link”）.className=“nohover”；
}否则{
document.getElementById（“链接”）.className=“”；
}
}

您可以使用Modernizr.js库。Modernizr将检查触摸支持，如果设备不支持触摸，则会在html标记上附加一个

.no touch

类，因此您可以对悬停链接执行以下操作：

.no-touch a:hover {
}

---

太好了：）。我已经调查过了。这似乎是一个很好的方法！以您的示例为例，我调整了浏览器的大小，并禁用了悬停状态。我希望这种情况发生在使用鼠标的设备上。

window.onresize = function() {
    if (window.innerWidth < 500) {
        document.getElementById("link").className = "nohover";
    } else {
        document.getElementById("link").className = "";
    }
}

.no-touch a:hover {
}