正如您所知，触摸屏技术不支持: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>
上述代码将产生以下输出：这是非触摸设备上的结果。
由于触摸设备上没有悬停效果，按钮保持在其原始状态。
