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，您可以添加这个简单的代码，将无触摸/触摸类附加到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>

Answer 2

无论如何，谢谢！最后，我制作了一个非常简单的脚本，它完美地工作......即使对于有鼠标的触摸电脑也很好（比如我的），当然也适用于手机。无需检测设备！解决方案是在页面更改后通过调用函数refresh_hover（）在光标指针下添加一个非常小的div。只要用户点击它或光标从中移出，就会删除此div 1px x 1px。这样，当内容在指针后面发生变化时，悬停效果就会被删除，但是当用户做某事时就会恢复！您可能会认为这非常愚蠢，但很简单且效果很好！

这是：

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'
}

css：悬停，触摸屏和单页应用程序

2 个答案: