Question

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

我知道我可以使用min / max-width来执行此操作，但我希望在所有视口大小的桌面上保持浏览器中的效果。我不想在手机/平板电脑上使用它的原因仅仅是因为没有鼠标...因此......悬停效果不会像我想要的那样翻译。

我看到您可以检测特定的用户代理样式表？或者有一些脚本可以做到这一点？我找到了一些，但他们没有得到很好的解释。

Modernizr不能做到这一点吗？我问，因为我在研究时看到它在帖子中提到过。

提前致谢：）

Answer 1

您可以使用JS并使用类来完成。 Example

HTML：

<a href="#" id="link">Homepage</a>

CSS：

#link {
    background: whitesmoke;
    border: 1px solid gainsboro;
    display: table;
    padding: 5px;
    transition: .5s;
}
/* hover won't work if the #link has a class "nohover" */
#link:not(.nohover):hover {
    background: skyblue;
    border: 1px solid dodgerblue;
}

当屏幕宽度小于目标设备宽度时，向元素添加.nohover。在这种情况下为500px。

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

Answer 2

您可以使用Modernizr.js库。如果设备不支持触摸，Modernizr将检查触摸支持并将.no-touch类附加到html标记，因此您可以为悬停链接执行以下操作：

.no-touch a:hover {
}

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

2 个答案: