关于 iPad 中 CSS 悬停/鼠标悬停的问题

Question

假设一个页面上有 5 个子链接（具有 searchBySub 类）和 5 个相应的按钮..

现在这 5 个子链接具有以下类定义

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

现在我正在 iPad 上测试这个页面。 可以点击 5 个子链接中的任何一个，这会改变它的 CSS（当然，点击的链接显示为选定的颜色）

此外，如果我单击任何相应的按钮，它应该会显示带有所选颜色的相应链接...我通过单击此按钮上的单击事件来执行此操作；

$(".button1").live("click",function(){
            $("link1").click(); //This is not exact code (but written dynamically...anyways it simulates the first link click)
        });

还有一件事，我无法显示确切的代码，因为每次点击链接/按钮时通过 AJAX 调用刷新内容，这就是我使用 jQuery.live() 进行绑定的原因...

现在我的问题是，在 iPAD 上，当我通过按钮单击模拟单击时，假设 Button2，虽然当前选择了链接 1，但它会正确地将链接 2 显示为选定颜色.... 但由于某些原因，它在此模拟点击期间显示带有悬停状态的 link1...我不知道为什么会发生这种情况..

请帮助我。谢谢。

Answer 1

您可能希望捕获 touchstart 事件并对其采取措施。对于没有鼠标的移动设备，当有人点击屏幕时，您会收到一系列事件：

• touchstart
• touchend
• mousedown
• mouseup
• click

mouse* 事件直到touchend 之后才会发生，这可能不是您想要的行为。查看Apple's mobile Safari event docs 了解更多信息：