首頁 > 文章 > web前端 > 如何防止觸控裝置上按鈕的黏性懸停效果？

如何防止觸控裝置上按鈕的黏性懸停效果？

WBOY轉載: 2023-08-22 12:25:06847瀏覽

如何防止觸控裝置上按鈕的黏性懸停效果？

在觸控裝置上，當使用CSS新增懸停效果時，元素會固定。本文將教你告訴我們如何解決這個問題。在觸控裝置上，沒有懸停效果，因此按鈕保持在原始狀態。沒有使用JavaScript：可以使用CSS的媒體查詢功能來解決這個問題。支援的設備 hover是與要求「hover: hover」相符的那些。為確保下面的CSS被添加只有在這些設備上，使用媒體查詢和這個條件。只有支援懸停的設備將在觸控裝置上看不到任何懸停效果。當你懸停在這個上面時，可以看到添加的懸停效果

如您所知，觸控螢幕技術不支援: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

這僅為支援懸停的設備添加了懸停效果；對於觸控設備沒有懸停效果。在在這種情況下，當滑鼠懸停在按鈕上時，按鈕的背景顏色會改變。在觸控裝置上，存在沒有懸停效果，因此按鈕保持在原始狀態。

<!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值。連續觸摸點的最大數量 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中為按鈕提供了懸停效果 −

<!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>

上述程式碼將產生以下輸出：這是非觸控裝置上的結果。

由於觸控裝置上沒有懸停效果，按鈕保持在原始狀態。

以上是如何防止觸控裝置上按鈕的黏性懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用FabricJS取得影像的原始碼？下一篇：如何使用FabricJS取得影像的原始碼？

看更多