为什么 :hover 会延迟？
我一直想知道点击元素时的 :hover 子句，它们似乎总是会延迟，例如，具有红色背景的元素 :hover，但是更改背景大约需要一秒钟。
另一个让我想知道的事情是，像 Facebook m.facebook.com 这样的移动网站，当点击元素时，它们似乎会在背景发生变化时立即做出响应（例如点击通知）。
如何在使用 :hover 时使效果相同？
好吧...因为没有人明白我的意思。一个典型的页面。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width = device-width; initial-scale = 1.0; maximum-scale = 1.0; minimum-scale = 1.0; user-scalable = 0;" />
<style type="text/css">
.row {
padding: 20px;
}
.row a:hover .row {
background-color: red;
}
</style>
<title>Test</title>
</head>
<body>
<div class="row">
<a href="#">Typical link</a>
</div>
<div class="row">
<a href="#">Typical link</a>
</div>
<div class="row">
<a href="#">Typical link</a>
</div>
</body>
</html>
如果您在 iPhone 上查看此内容，则当点击链接时，.row 的背景只需一秒钟即可将背景更改为红色。
我使用的是装有 iOS 4.3.3 的 iPhone 3GS - 当然这不会影响任何事情，因为从 iOS 3.x 开始就是这样。
I've always wondered about the :hover clause when tapping elements, they always seem to delay, for example, an element that will have a red background the :hover, however it takes about a second to change the background.
Another thing why this made me wondered, mobile sites such as Facebook m.facebook.com, when tapping on elements, they seem to response instantly when background changes (like tapping on a notification).
How do I make this effect the same when using :hover?
Okay... due to no-one gets what I mean. A typical page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width = device-width; initial-scale = 1.0; maximum-scale = 1.0; minimum-scale = 1.0; user-scalable = 0;" />
<style type="text/css">
.row {
padding: 20px;
}
.row a:hover .row {
background-color: red;
}
</style>
<title>Test</title>
</head>
<body>
<div class="row">
<a href="#">Typical link</a>
</div>
<div class="row">
<a href="#">Typical link</a>
</div>
<div class="row">
<a href="#">Typical link</a>
</div>
</body>
</html>
If you viewed this on an iPhone, when tapping on a link, the background of .row takes just a second to change the background to red.
I'm using an iPhone 3GS with iOS 4.3.3 - surely that doesn't affect anything because it's been like that since iOS 3.x.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在触摸屏设备上，事件有点不同 - 没有光标，悬停是相当没有意义的。
如果默认行为没有提供您想要的响应，您将需要使用 javascript 添加基于触摸事件的悬停/选定类。在 iOS 上，touchend 事件在单击事件之前触发几百毫秒，类似的情况可能也适用于悬停行为。
On a touchscreen device the events are a bit different - without a cursor, hover is fairly meaningless.
If the default behaviour doesn't provide the response you want, you will need to use javascript to add a hover/selected class based on touch events. On iOS the touchend event fires several hundred milliseconds before the click event, and something similar likely applies to the hover behaviour.