如何在触屏设备上防止按钮的粘滞悬停效果？

在触屏设备上，使用CSS添加悬停效果时，元素会粘滞。本文将教我们如何解决这个问题。

在触屏设备上，没有悬停效果，因此按钮保持其原始状态。无需使用JavaScript：CSS的媒体查询功能可以用来解决这个问题。“hover: hover”条件匹配支持悬停的设备。为了确保仅在这些设备上添加以下CSS，请将媒体查询与该条件一起使用。只有启用悬停的设备才会看到添加的悬停效果；触屏设备不会看到任何悬停效果。当您将鼠标悬停在该按钮上时，背景颜色会发生变化。此处使用JavaScript从HTML输入数组中检索值。

  • 如您所知，触摸屏技术不支持:hover行为。因此，在创建响应式网站时，您应该仔细考虑何时何地使用:hover交互。某些触摸屏设备会丢失打开URL的简单链接的:hover效果。在iOS上，您会看到:hover样式一小段时间，然后页面才会更改，因为:hover会在点击事件之前被激活。

  • 这些都是小问题，对网站的功能没有影响。这里a:hover，它使用display或visibility CSS属性显示或隐藏另一个元素，才是真正的问题。

有两种方法可以解决这个问题。

**第一种，无需JavaScript** − 可以使用CSS媒体查询功能来修复它。“hover: hover”条件指的是支持悬停的设备。通过将媒体查询与该条件一起使用，可以确保仅在这些设备上添加以下CSS。

代码片段

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

示例1

这只会为启用悬停的设备添加悬停效果；不会为触屏设备添加悬停效果。在这种情况下，当鼠标悬停在按钮上时，按钮的背景颜色会发生变化。在触屏设备上，没有悬停效果，因此按钮保持其原始状态。

Open Compiler
<!DOCTYPE html>
<html>
<title>How to prevent sticky hover effects for buttons on touch devices - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      #myButton {
         background-color: #096381;
         margin: 3%;
         font-size: 30px;
         color: #fff;
      }
      @media (hover: hover) {
         #myButton:hover {
            /*On devices that support hover, add a hover effect to the button.*/
            background-color: #0a92bf;
         }
      }
   </style>
</head>
<body>
   <h2>Welcome to TutorialsPoint!</h2>
   <p>Our mission is to deliver Simply Easy Learning with clear, crisp, and to-the-point content on a wide range of technical and non-technical subjects without any preconditions and impediments.</p>
   <button type="button" id="myButton">
      Submit
   </button>
</body>
</html>

以上代码将产生以下输出：这是在非触摸屏上的结果。

**第二种，使用JavaScript** − 此方法将使用JavaScript中的以下函数来检查我们是否使用的是启用触摸的设备。每当用户触摸元素时，ontouchstart事件都会返回true值。navigator.maxTouchPoints返回设备支持的最大连续触摸点数。

相同的函数在navigator.msMaxTouchPoints下以供应商前缀“ms”的形式提供，它针对IE 10及更早的浏览器。因此，如果设备支持触摸，则指定的函数将返回true。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

代码片段

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

示例2

在这个例子中，让我们了解如何在未启用触摸的情况下向按钮添加类。如下面的代码所示，此类在CSS中为按钮提供了悬停效果−

Open Compiler
<!DOCTYPE html>
<html>
<title>How to prevent sticky hover effects for buttons on touch devices - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      #myButton {
         background-color: #096381;
         margin: 3%;
         font-size: 30px;
         color: #fff;
      }
      .myButton2:hover {
         background-color: #0a92bf !important;
         /*The myButton2 class now has a hover effect.*/
      }
   </style>
</head>
<body onload="touchHover()">
   <p>TutorialsPoint have established a Digital Content Marketplace to sell Video Courses and eBooks at a very nominal cost. <br>You will have to register with us to avail these premium services.</p>
   <button type="button" id="myButton">Submit</button>
   <script>
      function touchHover() {
         function is_touch_enabled() {
            // Verify that touch is turned on
            return "ontouchstart" in window || navigator.maxTouchPoints > 0 ||
               navigator.msMaxTouchPoints > 0;
         }
         if (!is_touch_enabled()) {
            // Add the "myButton2" class if touch is not enabled.
            let verifyTouch = document.getElementById("myButton");
            verifyTouch.classList.add("myButton2");
         }
      }
   </script>
</body>
</html>

以上代码将产生以下输出：这是在非触摸屏设备上的结果。

由于触屏设备上没有悬停效果，因此按钮保持其原始状态。

更新于：2022年12月9日

1K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告