資料結構
網路
關係型資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在觸屏裝置上防止按鈕的粘滯懸停效果？
在觸屏裝置上，使用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
這隻會為啟用懸停的裝置新增懸停效果；不會為觸屏裝置新增懸停效果。在這種情況下，當滑鼠懸停在按鈕上時，按鈕的背景顏色會發生變化。在觸屏裝置上，沒有懸停效果，因此按鈕保持其原始狀態。
<!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。
程式碼片段
function is_touch_enabled() {
return ('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0);
}
示例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>
以上程式碼將產生以下輸出：這是在非觸控式螢幕裝置上的結果。
由於觸屏裝置上沒有懸停效果，因此按鈕保持其原始狀態。
1K+ 次瀏覽
