CSS :悬停、触摸屏和单页应用程序

css :hover, touch-screen and single page applications

本文关键字：单页 应用程序 触摸屏 悬停 CSS      更新时间：2023-09-26

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

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

代码非常简单：

.CSS

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

.HTML

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

您可以将现代化与触摸事件检测一起使用，而不是使用

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>

无论如何谢谢你！最后，我制作了一个非常简单的脚本，可以完美运行...即使对于也有鼠标的触摸计算机（如我的），当然也适用于手机。无需检测设备！解决方案是在页面更改后，通过调用函数 refresh_hover（） 在光标指针下添加一个非常小的div。一旦用户单击此div 1px x 1px 或光标从中移出，就会删除此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'
}
相关文章：