如您所知,觸控螢幕技術不支援: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; } }
這僅為支援懸停的設備添加了懸停效果;對於觸控設備沒有懸停效果。在 在這種情況下,當滑鼠懸停在按鈕上時,按鈕的背景顏色會改變。在觸控裝置上,存在 沒有懸停效果,因此按鈕保持在原始狀態。
<!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); }
在下面的程式碼中,這個類別在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中文網其他相關文章!