如何防止触摸设备上按钮的粘性悬停效果

当我们在CSS中为元素添加悬停效果时，它会在触摸设备上保持悬停状态。本文将学习如何解决这个问题。

解决这个问题有两种可能的方法：

不使用JavaScript： 可以使用CSS中的媒体查询来解决。条件 ‘hover: hover’ 表示支持悬停的设备。使用媒体查询和此条件一起可以确保下面的CSS样式仅在这些设备上添加。

代码片段：

@media(hover: hover) {
    #btn:hover {
        background-color: #ccf6c8;
    }
}

这仅在支持悬停的设备上添加悬停效果，这意味着触摸设备上不会应用悬停效果。在这里，按钮的背景颜色在悬停时发生了变化。

示例： 这个示例展示了上面解释的方法。

<style> 
    #btn { 
        background-color: #0dad78; 
        margin: 3%; 
        font-size: 30px; 
    } 
      
    @media (hover: hover) { 
        #btn:hover { 
      
            /*Add hover effect to button 
            on hover enabled devices*/ 
            background-color: #ccf6c8; 
        } 
    } 
</style> 
  
<button type="button" id="btn"> 
    Submit 
</button>

输出：

如何防止触摸设备上按钮的粘性悬停效果

使用JavaScript： 在这种方法中，我们将使用JavaScript来确定我们是否在一个触摸设备上使用下面的函数。当用户触摸元素时， ontouchstart 事件返回true。 navigator.maxTouchPoints 返回设备支持的最大同时触摸点数。 navigator.msMaxTouchPoints 也具有相同的功能，供IE 10及以下版本使用。

因此，如果设备支持触摸功能，给定的函数返回true。

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

如果触摸功能未启用，我们将给按钮添加一个类。这个类会在CSS中为按钮添加悬停效果，如下面的示例所描述：

示例： 此示例演示了上述的方法。

<style> 
    #btn { 
        background-color: #0dad78; 
        margin: 3%; 
        font-size: 30px; 
    } 
      
    .btn2:hover { 
        background-color: #ccf6c8 !important; 
        /*Hover effect is added to btn2 class*/ 
    } 
</style> 
  
<body onload="hover()"> 
    <button type="button" id="btn">Submit</button> 
  
    <script> 
        function hover() { 
            function is_touch_enabled() { 
          
                // Check if touch is enabled 
                return "ontouchstart" 
                    in window || navigator.maxTouchPoints > 0 
                    || navigator.msMaxTouchPoints > 0; 
            } 
            if (!is_touch_enabled()) { 
          
                // If touch is not enabled, add "btn2" class 
                var b = document.getElementById("btn"); 
                b.classList.add("btn2"); 
            } 
        } 
    </script> 
</body>

输出：