数据结构
网络
关系型数据库管理系统(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+ 次浏览
