如何防止触摸设备上的按钮出现粘性悬停效果?
在触摸设备中，使用 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 事件都会以真值响应。设备支持的最大连续触摸点数由 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>
上述代码将给出以下输出:这是非触摸设备上的结果。
由于触摸设备上没有悬停效果，按钮保持其原始状态。
