移动safari链接保持触摸后的焦点

Question

我的导航非常简单.我有一个悬停状态,它为一些文本添加了边框和透明渐变png背景,还有一个额外的类,当通过jQuery添加时,会在透明图像后面添加颜色.

如果单击以在Web浏览器中切换类,您将看到颜色进出,但如果您从未将鼠标移离按钮,则背景图像会保留.这是预期的行为.

我的问题是,当使用iPad时,触摸似乎保持悬停状态,并且:hover属性永远不会消失,除非您单击另一个按钮,在这种情况下,持久性:悬停属性将添加到该按钮,直到按下另一个按钮.

我无法想象我是第一个遇到这个问题的人,但是搜索没有任何改变.

救命？

正常 - 悬停 - 活动(通过addClass())

Answer 1

如果您使用的是Modernizr,则非触摸类将添加到非触摸设备的根html元素中.然后你可以这样做:

a.myclass {
   color:#999;
}

.no-touch a.myclass:hover,
a.myclass:active {
   color:#ccc;
}

Answer 2

Hover是一个CSS伪类,旨在使用指针而不是触摸事件.您通常希望完全避免使用悬停,因为它在移动设备上没有任何意义.处理此问题的最简单方法之一是将您的悬停CSS放在媒体查询中.您可以通过定位平板电脑或桌面屏幕来实现此目的,以下是两种解决方案:

1-定位iPad:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    RE.no-touch .my-element:hover {
         /* in here you cancel all hover styles you applied for desktop */ 
    }
}

2-定位桌面:

@media only screen 
and (min-width : 1224px) {
    RE.no-touch .my-element:hover {
         /* in here you apply hover styles that will only work on desktop */ 
    }
}

无论哪种方式都有效.如果您发现在某些设备中错误地触发了CSS,则可以更改最小和最大宽度的值.

Answer 3

这是一篇旧帖子，但我在 2019 年的今天遇到了这个问题，我找到了这个干净的解决方案，我想与大家分享。

<a href="#">Try hovering over me!</a>

@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}

基本上我们在这里所做的是在任何具有指针机制的设备中使用悬停。现在有一些带有 html 阅读器的软件可以更好地访问网站，这不是一个好主意，请禁用所有移动设备的 :hover。需要明确的是，任何没有指向机制的设备悬停都不会生效，否则我们将应用 :hover 样式。