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

在触摸设备上，当使用CSS添加悬停效果时，元素会固定。本文将教你告诉我们如何解决这个问题。在触摸设备上，没有悬停效果，因此按钮保持在其原始状态。没有使用JavaScript：可以使用CSS的媒体查询功能来解决这个问题。支持的设备hover是与要求“hover: hover”匹配的那些。为确保下面的CSS被添加只有在这些设备上，使用媒体查询和这个条件。只有支持悬停的设备将在触摸设备上看不到任何悬停效果。当你悬停在这个上面时，可以看到添加的悬停效果按钮，背景颜色会改变。这里使用JavaScript从HTML中获取值。

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

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

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

没有JavaScript的设备 – 可以使用CSS媒体查询函数来修复它。支持该功能的设备hover are referred to by the condition “hover: hover”. Adding the following CSS only on such devices使用媒体查询与此条件一起，保证了。

代码片段

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

登录后复制

Example 1

的中文翻译为：

示例 1

这仅为支持悬停的设备添加了悬停效果；对于触摸设备没有悬停效果。在在这种情况下，当鼠标悬停在按钮上时，按钮的背景颜色会发生变化。在触摸设备上，存在没有悬停效果，因此按钮保持在其原始状态。

      #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;         }      }   
Welcome to TutorialsPoint!
   
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.
         Submit   

登录后复制

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

使用JavaScript的第二步 – 在此方法中将使用以下JavaScript函数来检查无论我们是否使用触摸设备。每当用户触摸一个元素时，ontouchstart事件响应返回一个true值。连续触摸点的最大数量that the device supports is returned by navigator.maxTouchPoints.

该设备支持的功能由navigator.maxTouchPoints返回

在navigator.msMaxTouchPoints中，同样的功能在供应商前缀”ms”下可用目标是IE 10及更早版本的浏览器。因此，如果设备支持触摸功能，指定的function returns true.

代码片段

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

登录后复制

Example 2

的翻译为：

示例2

在这个例子中，让我们了解一下如果触摸功能未启用，如何为我们的按钮添加一个类。如下所示：

在下面的代码中，这个类在CSS中为按钮提供了悬停效果 −

      #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.*/      }   
TutorialsPoint have established a Digital Content Marketplace to sell Video Courses and eBooks at a very nominal cost. 
You will have to register with us to avail these premium services.
   Submit         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");         }      }   

登录后复制

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

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

以上就是如何防止触摸设备上按钮的粘性悬停效果？的详细内容，更多请关注【创想鸟】其它相关文章！