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>

- BillyBelly

---

我建议检测移动浏览器（参见此处），然后有条件地禁用悬停效果。您可以在附加到<button>的事件侦听器中提供替代“反馈”方法。 - varzeak

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>

- Neji

Answer 2

无论如何，谢谢！最终我编写了一个非常简单的脚本，它完美地工作...即使是像我的触摸电脑一样也带有鼠标，当然还包括移动电话。没有必要检测设备！解决方案是在页面更改后调用refresh_hover()函数，在光标指针下方添加一个非常小的div。这个1像素 x 1像素的div会在用户单击它或光标从它上面移开时立即被删除。通过这种方式，当内容在指针后面更改时，悬停效果被移除，但当用户执行某些操作时，又会恢复！你可能会认为这很愚蠢，但它简单而且非常有效！

就是这样：

function refresh_hover(){

    if(!event){
        return false;
    }

    var x = event.clientX;
    var y = event.clientY;

    var div = document.getElementById('mouse_div');

    if(!div){
        document.body.innerHTML=document.body.innerHTML
        +'<div style="position: fixed; z-index: 1000; height: 1px; width: 1px; display: block;" id="mouse_div" onmouseout="this.style.display=\'none\'" onclick="this.style.display=\'none\'"></div>';
        div = document.getElementById('mouse_div');
    }


    div.style.display='block';
    div.style.top=y+'px';
    div.style.left=x+'px'
}

- BillyBelly