触摸屏设备上的 CSS 悬停不会被忽略

Posted 2023-03-06

技术标签:

【中文标题】触摸屏设备上的 CSS 悬停不会被忽略【英文标题】：CSS hover not being ignored on touch-screen devices 【发布时间】：2012-12-05 20:46:14 【问题描述】：

我添加了一个带有 html 按钮的 div：

$('.nav').append('<button class="restart">Restart</button>');

该按钮具有用于悬停的 css 属性。我的问题是，当点击触摸屏设备上的按钮时，按钮会保持悬停状态，直到点击另一个元素。

在使用触屏设备浏览时，有什么方法可以忽略悬停属性？

【问题讨论】：

你有type="button"这个属性吗？如果没有，则该按钮默认成为提交按钮。 @Neal 是的，看看规范。 whatwg.org/specs/web-apps/current-work/multipage/… "缺失值默认为提交按钮状态。" @PatrickJamesMcDougle 是的什么是？什么时候提交过任何形式的表格？ @PatrickJamesMcDougle 你错了。一个按钮提交它的表单。如果按钮不在表单中，则无法提交，因为没有可以提交的“默认表单”。所以它不会做任何事情。 【参考方案1】：

我最近遇到了这个确切的问题，ios 似乎将悬停伪视为额外点击，因此链接需要点击两次等。

如果你使用modernizr，你可以通过应用于html标签的.no-touch类来应用你的:hover psuedos。

所以：

html a  color:#222; 

html.no-touch a:hover  color:#111;

【讨论】：

这里是关于如何在可点击元素上触发事件的 iOS 文档：developer.apple.com/library/IOs/#documentation/…【参考方案2】：

不是一个理想的解决方案，但感谢 @dualed 提供的先机！

@media screen and (min-device-width:768px) and (max-device-width:1024px) /*catch touch screen devices */

    button.restart:hover
    
        /* replicate 'up' state of element */

【讨论】：

在纵向插入鼠标的小型笔记本电脑（例如 MS Surface）怎么样？这是一种不太理想的方法。【参考方案3】：

您可以在 CSS 规则中指定媒体类型。

@media handheld 
  button.restart:hover 
    /* undo hover styling */

但是，请注意，手持设备不一定有触摸屏。

（顺便说一句。这是 CSS 而不是 jQuery）

【讨论】：

Handheld 不太好用，但是通过在查询中指定 device-width，我有一个解决方案。 @rhastings 可能有效，但可能有其他副作用。您可能必须指定确切的设备大小。遗憾的是 mozilla -moz-touch-enabled 在 webkit 上没有等效的实现。另外，我假设我们正在谈论移动产品的 i-range，请看这里developer.apple.com/library/safari/#documentation/…【参考方案4】：

也许这不是你想要的，但你可以根据媒体指定不同的 css 样式表：

 <link rel="stylesheet" media="screen,projection,tv" href="main.css" type="text/css">
 <link rel="stylesheet" media="print" href="print.css" type="text/css">
 <link rel="stylesheet" media="handheld" href="smallscreen.css" type="text/css">

在上面的例子中，main.css 将用于计算机屏幕，但对于手持设备，它将是 smallscreen.css

【讨论】：

正确，尽管目前几乎所有的触摸设备都将自己报告为“屏幕”，而不是手持设备。【参考方案5】：

一个不错的简单方法是使用Modernizr。

Modernizr 运行时，会在 HTML 的 class 属性中添加一个条目为它检测到的每个功能添加标签，在该功能前面加上 no- 如果浏览器不支持。

现在将以下几行添加到您的 css 样式表中