Javascript iPad CSS悬停问题

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

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

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

---

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

使用HTML标题中的媒体查询来调节屏幕设备的悬停。

在您的情况下，尝试将鼠标悬停在单独的屏幕上

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

---

通过在HTML标题中使用媒体查询来调节屏幕设备的悬停。

在您的情况下，尝试将鼠标悬停在单独的屏幕上

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

---

如果您想使用JavaScript，可以使用jQuery mobile并引发添加类的单击事件。

---

常规的jQuery会导致问题，因为它不接受触摸事件，苹果硬件会触发

如果你想使用JavaScript，你可以使用jQuery mobile并引发添加类的点击事件。

---

常规的jQuery会导致问题，因为它不接受触摸事件，苹果硬件会触发

我同意媒体的查询，但类似这样

您可以尝试撤消其中的悬停状态。然而，理想的设想是先创建移动风格，然后再创建全屏浏览器风格

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

---

我同意媒体的质疑，但我也同意

您可以尝试撤消其中的悬停状态。然而，理想的设想是先创建移动风格，然后再创建全屏浏览器风格

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

---

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

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

---

另一个选择是在构建中包含Modernizer，这将在标记中添加一个触摸/非触摸类。然后，您可以将：hover标记定位为仅与非触摸设备相关：

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

我（无意中）发现，当触发

：hover

状态的元素应用了CSS转换时，iOS似乎忽略了hover状态并触发了单击

在我的例子中，我实际上希望悬停状态能够工作，但直到我删除了这些转换（或者在iOS上专门排除了它们）之后，它才能够工作。如果有人愿意，我可以发布一些示例代码。

我偶然发现，当触发

：hover

状态的元素应用了CSS转换时，iOS似乎会忽略悬停状态并触发单击

---

在我的例子中，我实际上希望悬停状态能够工作，但直到我删除了这些转换（或者在iOS上专门排除了它们）之后，它才能够工作。如果有人愿意，可以发布一些示例代码。

我真的不确定媒体查询在这里会有什么帮助……我的问题是，当我点击任何链接时，我想要的类应该是a.searchBySubClicked而不是a.searchBySub:hoverMedia查询将阻止iPad看到悬停。我怀疑有没有其他方法可以在不使用css黑客（默认情况下是邪恶的）的情况下将hover仅用于非iPad，因为触摸设备首先不应该触发hover。因此，媒体检测或javascript（在navigator.userAgent中检测字符串“iPad”并防止悬停事件）我真的不知道媒体查询在这里会有什么帮助……我的问题是，当我点击任何我想要的链接时，它所使用的类应该是a.searchBySubClicked而不是a.searchBySub:hover媒体查询将阻止iPad看到悬停。我怀疑有没有其他方法可以在不使用css黑客（默认情况下是邪恶的）的情况下将hover仅用于非iPad，因为触摸设备首先不应该触发hover。因此，媒体检测或javascript（在navigator.userAgent中检测字符串“iPad”并防止悬停事件）