javascript - css :hover, 触摸屏和单页应用

Question

我正在使用 HTML、CSS 和 Javascript(没有 jQuery 或类似工具)制作一个单页应用程序。这个应用程序由许多可以通过 Javascript 更改的 UI 页面组成。在计算机上使用鼠标的用户体验很好，但在触摸屏(移动设备等)上就不太好了。

有许多带有 CSS 悬停图形效果的按钮。如果我在触摸屏上点击一个按钮来更改页面，当页面“更改”时，指针会停留在那里，触发出现在同一位置的下一个元素的 CSS 悬停。这种效果非常烦人，但我不知道如何解决它。

代码很简单:

CSS

button {
    background-color: #XXXXXX;
}

button:hover {
    background-color: #ZZZZZZ;
}

HTML

<button onclick="changepage()"></button>

Answer 1

您可以使用 modernizr使用触摸事件检测，而不是使用

html.no-touch button:hover {
    background-color: #ZZZZZZ;
}

如果没有 modernizr，您可以添加这个简单的代码来将 no-touch/touch 类附加到 html 标签

 <script type="text/javascript">

    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Windows Phone/i.test(navigator.userAgent)) {
       document.getElementsByTagName('html')[0].className += ' touch';
    }else{
       document.getElementsByTagName('html')[0].className += ' no-touch';
    }

 </script>