.hover 的替代方案，可在移动设备上启用更好的功能

Posted 2023-05-08

【中文标题】.hover 的替代方案，可在移动设备上启用更好的功能

【英文标题】：Alternative for .hover to enable better functionality on mobile devices

【发布时间】：2020-09-11 14:57:56

【问题描述】：

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

如果只是轻轻一碰就好了。奇怪的是，我还有另一个 div，当它悬停时它会改变一个元素。在这种情况下，它是一个子元素，所以我使用 css :hover 伪类来实现这一点，它在桌面和移动设备上完美运行。然而，jQuery .hover 似乎与 css :hover 的行为不同。

有没有办法让 jQuery .hover 和 css :hover 一样。

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


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

【参考方案1】：

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

然后您只需在 jQuery hover 上切换该类，因为您无法使用 jQuery 强制动态伪类。

有关更多信息，请参阅this answer。