Why do :hover delay?
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.
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.
加载中,请稍侯......
精彩评论