替代.hover，在移动设备上实现更好的功能。

Question

我使用JQuery为一个元素(.bg1)添加了一个类，当用户悬停在另一个元素(.box1)上时，这个类可以在桌面上正常工作，我的问题是，当在移动设备上查看时，因为手机没有鼠标，悬停效果只能在用户点击屏幕时看到。这在台式机上工作得很好，我的问题是，当在移动设备上查看时，因为移动设备没有鼠标，只有当用户点击屏幕时才能看到悬停效果。

如果只是轻触就可以了。奇怪的是，我还有另一个div，当悬停时它会改变一个元素。在这种情况下，它是一个子元素，所以我使用css:hover伪类来实现这个功能，它在桌面和手机上完美地工作。然而jQuery的.hover似乎和css :hover的行为不同。

有沒有辦法讓jQuery .hover和css :hover一樣呢？

jQuery('.box1').hover(
       function(){jQuery('.bg1').addClass('shown') },


 function(){jQuery('.bg1').removeClass('shown') }     
); 

Answer 1

你应该做的是为jQuery:hover状态添加一个单独的类，并将其与你的:hover选择器结合起来。.class:hover, .class.jqHover { the hover code }

那你就用jQuery hover来切换该类，因为jQuery不能强制使用动态伪类。

請看 本回答 以获取更多信息。