如果用户通过触摸设备访问我们的网站，我想忽略所有:hover CSS声明。因为:hover CSS没有意义，如果平板电脑在点击/点击时触发它，它甚至会令人不安，因为它可能会一直停留到元素失去焦点。说实话，我不知道为什么触屏设备觉得有必要触发:悬停在第一位——但这是现实，所以这个问题也是现实。
a:hover {
color:blue;
border-color:green;
/* etc. > ignore all at once for touch devices */
}
所以，(如何)我可以删除/忽略所有CSS:悬停声明在一次(而不必知道每一个)有他们声明后触摸设备?
当前回答
使用带有媒体指针的媒体悬停将帮助您解决此问题。
@media (hover: none) and (pointer: coarse) {
/* Smartphones and touchscreens */
}
其他回答
根据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;
}
}
2020解决方案- CSS只-没有Javascript
使用带有媒体指针的媒体悬停将帮助您解决此问题。在chrome Web和android手机上测试。我知道这个老问题，但我没有找到像这样的答案。
@media (hover: hover) and(指针:fine) { A:悬停{颜色:红色;｝ ｝ <a href="#" >Some Link</a>
试试这个(我在这个例子中使用background和background-color):
var ClickEventType = ((document.ontouchstart !== null) ? 'click' : 'touchstart');
if (ClickEventType == 'touchstart') {
$('a').each(function() { // save original..
var back_color = $(this).css('background-color');
var background = $(this).css('background');
$(this).attr('data-back_color', back_color);
$(this).attr('data-background', background);
});
$('a').on('touchend', function(e) { // overwrite with original style..
var background = $(this).attr('data-background');
var back_color = $(this).attr('data-back_color');
if (back_color != undefined) {
$(this).css({'background-color': back_color});
}
if (background != undefined) {
$(this).css({'background': background});
}
}).on('touchstart', function(e) { // clear added stlye="" elements..
$(this).css({'background': '', 'background-color': ''});
});
}
css:
a {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
在浏览了前面的答案之后，这个方法对我很有效。 这个悬停只适用于有悬停功能的桌面。如果这个类/id有任何其他悬停代码，则删除
@media (hover: hover) {
.toggle-label:hover {
background-color: #69c9ff;
color: #ffffff;
}
}
使用带有媒体指针的媒体悬停将帮助您解决此问题。
@media (hover: none) and (pointer: coarse) {
/* Smartphones and touchscreens */
}
