Question

我有一个包含5个子链接的页面，其中包含“searchBySub”类现在在我的CSS中我已经定义了正常的悬停状态以及一个用于单击的类所以我们有

#leftNav .searchBySub {...}
#leftNav a.searchBySub:hover {...}
#leftNav .searchBySubClicked {...}

我的问题是，当在iPad上点击这5个子链接中的任何一个时，它会进入悬停状态。那么有什么办法可以强迫它不要进入悬停状态而不是应用类searchBySubClicked

由于悬停状态导致一些问题......请帮助我。谢谢。

Answer 1

通过在HTML标头中使用媒体查询来规范屏幕设备的悬停。 http://www.w3.org/TR/css3-mediaqueries/

在你的情况下尝试将悬停放在单独的屏幕用途css。

<link rel="stylesheet" media="screen" href="hover.css" />

Answer 2

如果你想采用JavaScript方式，你可以使用jQuery mobile http://jquerymobile.com/并引发添加你的类的点击事件。常规jQuery会导致问题，因为它不接受触摸事件，即apple-hardware触发器

Answer 3

我同意媒体查询，但同样如此http://css-tricks.com/snippets/css/ipad-specific-css/

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

您可以尝试撤消那里的悬停状态。然而理想的理想情况是首先创建移动样式，然后在

中创建全屏浏览器样式

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
    #leftNav a.searchBySub:hover {...}    
}

Answer 4

另一种选择是在您的构建中包含modernizr，它会为您的＆lt; html＆gt;添加触摸/不触摸类。标签。然后，您可以将：hover标记定位为仅与非触摸设备相关：

#leftNav .searchBySub {...)
.no-touch #leftNav a.searchBySub:hover {...}
#leftNav .searchBySubClicked {...}

http://modernizr.com/

Answer 5

我（偶然地）发现当触发:hover状态的元素应用 CSS过渡时，iOS似乎忽略了悬停状态并触发了点击。

在我的情况下，我实际上想要悬停状态才能工作但是在我删除转换（或在iOS上专门排除它们）之前无法使其工作。如果有人愿意，可以发布一些示例代码。

iPad CSS悬停问题

5 个答案: