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

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

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

1. 不使用JavaScript：可以通过CSS中的媒体查询来解决。条件“悬停：悬停”是指支持悬停的设备。在此条件下使用媒体查询可确保仅在此类设备上添加以下 CSS。

代码片段：

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

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

例子：

  

    

  

    
        Submit
    

  

输出（在非触摸屏上）：

由于没有悬停效果，该按钮在触摸设备上保持其原始状态。

2. 使用 JavaScript：在此方法中，我们将使用 JavaScript 来确定我们是否使用以下函数在支持触摸的设备上。当用户触摸一个元素时， ontouchstart事件返回 true。 navigator.maxTouchPoints返回设备支持的最大同时触摸点数。 navigator.msMaxTouchPoints也具有相同的函数，带有供应商前缀“ms”，用于目标浏览器 IE 10 及以下。

因此，如果设备启用了触摸功能，则给定的函数返回 true。 （要阅读有关该函数的更多信息，请参阅：https://www.geeksforgeeks.org/how-to-detect-touch-screen-device-using-javascript/）

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

如果未启用触摸，我们向按钮添加一个类。此类向 CSS 中的按钮添加悬停效果，如下例所述：

例子：

  

    
        #btn {
            background-color: #0dad78;
            margin: 3%;
            font-size: 30px;
        }
  
        .btn2:hover {
            background-color: #ccf6c8 !important;
            /*Hover effect is added to btn2 class*/
        }
    

  

    Submit
  
    
        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");
            }
        }
    

  

输出（在非触摸设备上）：

由于没有悬停效果，该按钮在触摸设备上保持其原始状态。