CSS hover 在触摸屏设备上不起作用

Question

我已经添加了一个带有 HTML 按钮的 div：

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

按钮具有 hover 的 CSS 属性。我的问题是，在触摸屏设备上轻拍按钮时，按钮会保留其 hover 状态，直到另一个元素被轻敲。

是否有方法可以在使用触摸屏设备浏览时忽略 hover 属性？

- richhastings

---

你是否有属性 type="button"？如果没有，默认情况下按钮将变成提交按钮。 - Patrick James McDougle

@PatrickJamesMcDougle 是什么？ - Naftali

我只是想告诉这个人，如果他们不想让这个按钮提交到当前页面，他们将会有其他事情要处理。 - Patrick James McDougle

有提及过提交表格吗？ - harman_kardon

@PatrickJamesMcDougle 你错了。一个按钮会提交它所在的表单。如果一个按钮不在表单中，它就不能提交表单，因为没有“默认表单”可以被提交。所以它什么也不会做。 - dualed

Answer 1

我最近遇到了这个问题，iOS似乎把悬停伪类视为额外的点击，因此需要点击两次才能链接等。

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

所以：

html a { color:#222; }

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

- Wayne Austin

---

这是关于可点击元素如何触发事件的iOS文档：http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7 - Patrick James McDougle

Answer 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 */
    }
}

- richhastings

---

小型笔记本电脑（例如微软Surface）插入鼠标并以纵向方式使用时怎么办？这是一种次优的方法。 - dudewad

Answer 3

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

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

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

（顺便说一下，这是 CSS 而不是 jQuery）

- dualed

---

手持设备的使用效果不太好，但是通过在查询中指定设备宽度，我找到了一个解决方案。 - richhastings

@rhastings 这可能有效，但可能会有其他副作用。您可能需要指定确切的设备尺寸。不幸的是，Mozilla 的“-moz-touch-enabled”在 Webkit 上没有等效的实现。此外，我假设我们正在谈论移动产品的 i 系列，请查看这里 http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safaricssref/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3 - dualed

Answer 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。

- Slauster

---

正确，尽管几乎所有的触摸设备目前都报告自己为“屏幕”，而不是手持设备。 - Design by Adrian

Answer 5

一个好用且简单的方法是使用Modernizr。

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

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

.touch *:hover {
    display: none;
}

可以自由地使用:hover，无论您想使用多少次。当您的网站在触摸屏上查看时，所有元素的悬停效果都将被禁用。

- user2598045

---

此外，CSS中的非常低效。然而，从技术角度来看，这种技术应该是可行的。 - dudewad