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

【问题标题】：CSS hover not being ignored on touch-screen devices触摸屏设备上的 CSS 悬停不会被忽略
【发布时间】：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 你错了。一个按钮提交它的表单。如果按钮不在表单中，则无法提交，因为没有可以提交的“默认表单”。所以它不会做任何事情。

标签： jquery html button hover touch

【解决方案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 样式表中

.touch *:hover {
    display: none;
}

并随意使用 :hover 任意次数。当您在触摸屏中查看您的网站时，所有元素的悬停效果都将被禁用。

【讨论】：

另外，css 中的 * 令人难以置信效率低下。但是，从技术角度来看，这种技术应该可行。