如果用户通过触摸设备访问我们的网站，我想忽略所有:hover CSS声明。因为:hover CSS没有意义，如果平板电脑在点击/点击时触发它，它甚至会令人不安，因为它可能会一直停留到元素失去焦点。说实话，我不知道为什么触屏设备觉得有必要触发:悬停在第一位——但这是现实，所以这个问题也是现实。
a:hover {
color:blue;
border-color:green;
/* etc. > ignore all at once for touch devices */
}
所以，(如何)我可以删除/忽略所有CSS:悬停声明在一次(而不必知道每一个)有他们声明后触摸设备?
当前回答
要使当前的答案也在IE11中工作(如果你仍然支持它的话):
@media (hover: hover) and (pointer: fine)， only screen and (-ms-high-对比度:active)， (-ms-high-对比度:none) { A:悬停{颜色:红色;｝ ｝ <a href="#" >Some Link</a>
其他回答
你可以使用Modernizr JS(也见这个StackOverflow的答案)，或自定义JS函数:
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
if ( is_touch_device() ) {
$('html').addClass('touch');
} else {
$('html').addClass('no-touch');
}
来检测浏览器对touch事件的支持，然后分配一个常规的CSS属性，用html遍历元素。无接触类，像这样:
html.touch a {
width: 480px;
}
/* FOR THE DESKTOP, SET THE HOVER STATE */
html.no-touch a:hover {
width: auto;
color:blue;
border-color:green;
}
如果你的问题是当你触摸/点击android和整个div覆盖蓝色透明颜色!然后你只需要改变
光标:指针; 来 游标:default;
使用mediaQuery隐藏在手机/平板电脑。
这对我很有用。
在浏览了前面的答案之后，这个方法对我很有效。 这个悬停只适用于有悬停功能的桌面。如果这个类/id有任何其他悬停代码，则删除
@media (hover: hover) {
.toggle-label:hover {
background-color: #69c9ff;
color: #ffffff;
}
}
使用带有媒体指针的媒体悬停将帮助您解决此问题。
@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;
}
}
