iPad CSS 悬停问题答案

【问题标题】：iPad CSS hover issueiPad CSS 悬停问题
【发布时间】：2014-04-16 08:15:40
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript html css ipad safari

【解决方案1】：

我同意媒体查询，但喜欢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 {...}    
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我真的不确定媒体查询在这里有什么帮助......我的问题是当我点击任何链接时，我希望它所需要的类应该是 a.searchBySubClicked 而不是 a.searchBySub :悬停
媒体查询将完全阻止 iPad 看到悬停。我怀疑是否有任何其他方法可以在不使用 css hacks（默认情况下是邪恶的）的情况下将悬停只停留在非 iPad 上，因为触摸设备不应该首先触发悬停。所以无论是媒体检测还是javascript（在navigator.userAgent中检测字符串'iPad'并防止悬停事件）

【解决方案3】：

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

【讨论】：

【解决方案4】：

另一个选择是在你的构建中包含modernizr，它会在你的标签中添加一个touch/no-touch类。然后您可以将 :hover 标记定位为仅与非触摸设备相关：

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

http://modernizr.com/

【讨论】：

【解决方案5】：

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

在我的情况下，我实际上希望使悬停状态起作用，但直到我删除了转换（或在 iOS 上专门排除了它们）才能使其起作用。如果有人愿意，可以发布一些示例代码。

【讨论】：