如何在触摸设备上移除/忽略:hover CSS样式

8 浏览
0 Comments

如何在触摸设备上移除/忽略:hover CSS样式

如果用户通过触摸设备访问我们的网站，我想忽略所有的:hover CSS声明。因为:hover CSS没有意义，而且如果平板电脑在点击/轻击时触发它，甚至可能会产生干扰，因为这样它可能会一直保持，直到元素失去焦点。说实话，我不知道为什么触摸设备首先要触发:hover - 但这就是现实，所以这个问题也是现实的。\n

a:hover {
  color:blue;
  border-color:green;
  /* 等等 > 对于触摸设备一次性忽略所有声明 */
}

\n那么，我如何一次性移除/忽略所有CSS的:hover声明（而不需要知道每一个声明）在声明之后对于触摸设备？

0

3 答案

0 Comments

如何在触摸设备上去除/忽略:hover CSS样式？

问题原因：在触摸设备上，当我们点击一个元素时，它会触发:hover样式，导致样式变为蓝色。这是因为触摸设备无法识别鼠标悬停事件，所以默认情况下会应用:hover样式。

解决方法：使用CSS中的@media查询和:link, :visited伪类来覆盖:hover样式，从而在触摸设备上去除或忽略:hover样式。

具体代码如下：

/* 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';
  }
}


Hoverable pointer detected: 


Experiences between device hover capabilities


If the device has a hover capability, the link below:


    
  
  • should be red
    • 
  
  • should be blue when hovered
    • 



If the device does not have a hover capability, the link below:


    
  
  • should always be blue
    • 
  
  • should be surrounded by a blue border
    • 



Link

注意：由于Surface PC的主要输入方式是鼠标，即使是分离式（平板）屏幕，它也会变为蓝色链接。浏览器应该始终默认使用最精确的输入能力。

解决方法已在iPad上的Chrome / Safari和OS X上的Chrome / Safari上完美运行。但在Chrome移动模式下测试时，无法去除:hover样式，这是Chrome开发工具的限制。建议在真正的触摸设备上测试链接。

其他用户也测试了在iPhone 6S（iOS 11）、iPhone 7（iOS 11）和Nexus 5X（Android 8.1.0和Chrome 68.0.3440.91）上的效果，结果iPhone 6S和Nexus 5X的链接依然变为蓝色，而iPhone 7的链接保持为红色。

对于链接未访问和已访问的情况，:link CSS伪类表示尚未访问的元素，因此该解决方法对于尚未访问的链接和已访问的链接会有不同的行为。

关于在媒体查询中重复使用:link, :visited而不是:hover的逻辑，这是为了利用层叠样式表（相同特异性的选择器的层叠），同时明确声明不应该应用:hover样式。这是LoVeHAte模式的一种实现方式。可以使用CSS自定义属性、BEM命名规范等多种方法来解决重复样式的问题，但这种模式能够确保代码在所有浏览器中（过去、现在和未来）都能正常工作。

通过使用@media查询和:link, :visited伪类，我们可以在触摸设备上去除或忽略:hover样式。这种解决方法可以确保链接在具有悬停能力和没有悬停能力的设备上都能正确显示样式。

0
0 Comments

2020解决方案 - 仅使用CSS - 无需JavaScript

使用媒体悬停和媒体指针将有助于解决此问题。在Chrome Web和Android移动设备上进行了测试。我知道这是一个老问题，但是我没有找到像这样的解决方案。

(hover: hover) and (pointer: fine) {
  a:hover { color: red; }
}

<a href="#" >Some Link</a>

IE不支持

在带有触摸屏的笔记本上的Chrome 92上不起作用。

我认为可能是由于pointer: fine媒体查询评估的不是实际使用的指针，而是主要指针 - 即鼠标。但在iOS上运行得很好。

这是因为触摸屏将触发指针的“粗糙”属性。指针有2个选项。Fine和Coarse。Fine = 主要输入机制包括准确的指针设备。Coarse = 主要输入机制包括精度有限的指针设备。也就是说，鼠标=精细，但手指=粗糙。

0
0 Comments

如何在触摸设备上删除/忽略:hover CSS样式

快速而简单的方法是使用JavaScript删除所有包含:hover的CSS规则。这样做的好处是不需要更改CSS，并且与旧版浏览器兼容。

另一种方法是使用媒体查询。将所有:hover规则放在@media (hover: hover)块中。这种方法只适用于iOS 9.0+、Chrome for Android或Android 5.0+的WebView。

最可靠的方法是通过JavaScript检测触摸，并在所有:hover规则之前添加body.hasHover类。这种方法可以在任何浏览器中工作，并根据需要启用/禁用:hover样式。

以上是问题的出现原因和解决方法的整理。

0