如果用户通过触摸设备访问我们的网站，我想忽略所有:hover CSS声明。因为:hover CSS没有意义，如果平板电脑在点击/点击时触发它，它甚至会令人不安，因为它可能会一直停留到元素失去焦点。说实话，我不知道为什么触屏设备觉得有必要触发:悬停在第一位——但这是现实，所以这个问题也是现实。
a:hover {
color:blue;
border-color:green;
/* etc. > ignore all at once for touch devices */
}
所以，(如何)我可以删除/忽略所有CSS:悬停声明在一次(而不必知道每一个)有他们声明后触摸设备?
当前回答
2020解决方案- CSS只-没有Javascript
使用带有媒体指针的媒体悬停将帮助您解决此问题。在chrome Web和android手机上测试。我知道这个老问题，但我没有找到像这样的答案。
@media (hover: hover) and(指针:fine) { A:悬停{颜色:红色;｝ ｝ <a href="#" >Some Link</a>
其他回答
这也是一个可能的解决方案，但你必须通过你的css和添加一个.no-touch类在你的悬停样式。
Javascript:
if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}
CSS例子:
<style>
p span {
display: none;
}
.no-touch p:hover span {
display: inline;
}
</style>
<p><a href="/">Tap me</a><span>You tapped!</span></p>
源
附注:但是我们应该记住，市场上有越来越多的触摸设备，它们同时也支持鼠标输入。
根据Jason的回答，我们只能用纯css媒体查询来解决不支持悬停的设备。我们也可以只处理支持悬停的设备，就像moogal在类似问题中的回答一样 @media not all and(悬停:none)。看起来很奇怪，但很有效。
为了更容易使用，我做了一个Sass mixin:
@mixin hover-supported {
@media not all and (hover: none) {
&:hover {
@content;
}
}
}
更新2019-05-15:我推荐Medium的这篇文章，它介绍了我们可以使用CSS瞄准的所有不同设备。基本上，它是这些媒体规则的混合，针对特定目标将它们结合起来:
@media (hover: hover) {
/* Device that can hover (desktops) */
}
@media (hover: none) {
/* Device that can not hover with ease */
}
@media (pointer: coarse) {
/* Device with limited pointing accuracy (touch) */
}
@media (pointer: fine) {
/* Device with accurate pointing (desktop, stylus-based) */
}
@media (pointer: none) {
/* Device with no pointing */
}
针对特定目标的示例:
@media (hover: none) and (pointer: coarse) {
/* Smartphones and touchscreens */
}
@media (hover: hover) and (pointer: fine) {
/* Desktops with mouse */
}
我喜欢mixin，这就是我如何使用我的hover mixin只针对支持它的设备:
@mixin on-hover {
@media (hover: hover) and (pointer: fine) {
&:hover {
@content;
}
}
}
button {
@include on-hover {
color: blue;
}
}
悬停CSS媒体功能来拯救!仅使用CSS，当设备没有悬停功能时，您可以覆盖样式。
下面的演示由现代触摸设备支持。
/* hover query styles */ a { color: red; font-size: 3em; } a:hover { color: blue; } @media (hover: none) { a:link, a:visited { color: blue; text-decoration: none; border: 0.1em solid currentColor; padding: 0 0.1em; } } /* used to show if demo browser has hover capabilities */ .detection:before { content: 'UNKNOWN'; color: red; } @media(hover) { .detection:before { content: 'YES'; color: green; } } @media (hover: none) { .detection:before { content: 'NO'; } } <p>Hoverable pointer detected: <span class="detection"></span></p> <h3>Experiences between device hover capabilities</h3> <p>If the device has a hover capability, the link below:</p> <ul> <li>should be red</li> <li>should be blue when hovered</li> </ul> <p>If the device does not have a hover capability, the link below:</p> <ul> <li>should always be blue</li> <li>should be surrounded by a blue border</li> </ul> <p><a href="https://www.google.com">Link</a></p>
注意:请记住，由于Surface PC的主要输入(功能)是鼠标，它最终将是一个蓝色链接，即使它是一个分离的(平板电脑)屏幕。浏览器将(应该)总是默认使用最精确的输入功能。
试试这个简单的2019 jquery解决方案，虽然它已经有一段时间了;
将这个插件添加到head: src = " https://code.jquery.com/ui/1.12.0/jquery-ui.min.js " 将此添加到js: 美元(“*”)。On ("touchend"，函数(e) {$(this).focus();});//应用于所有元素 一些建议的变化是: $(":输入:复选框,")。On ("touchend"，函数(e) {(this).focus);});/ /指定元素 美元(“*”)。On ("click, touchend"，函数(e) {$(this).focus();});//包含点击事件 Css: body{游标:指针;} //触摸任意位置结束焦点
笔记
将plugin放在bootstrap.js之前，以避免影响工具提示 仅在使用Safari或Chrome的iphone XR ios 12.1.12和ipad 3 ios 9.3.5上测试。
引用:
https://code.jquery.com/ui/
https://api.jquery.com/category/selectors/jquery-selector-extensions/
它对我很有帮助:链接
function hoverTouchUnstick() {
// Check if the device supports touch events
if('ontouchstart' in document.documentElement) {
// Loop through each stylesheet
for(var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
var sheet = document.styleSheets[sheetI];
// Verify if cssRules exists in sheet
if(sheet.cssRules) {
// Loop through each rule in sheet
for(var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
var rule = sheet.cssRules[ruleI];
// Verify rule has selector text
if(rule.selectorText) {
// Replace hover psuedo-class with active psuedo-class
rule.selectorText = rule.selectorText.replace(":hover", ":active");
}
}
}
}
}
}
