jQuery hover() 出现页面刷新触发的bug
jQuery hover() 出现页面刷新触发的bug
点击菜单切换页面时 会有一定概率出现没有hover到菜单，#mega-off-grid-living无故弹出的bug
="megamenu-event" id="mega-off-grid-living">
="megamenu-event-box">
="" class="event1" style="background:#d9d9d9;">
![]()
="" class="event-icon">
="event-text">RV"0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor">
="" class="event2" style="background:#d9d9d9;">
![]()
="" class="event-icon">
="event-text">Cabin"0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor">
="" class="event3" style="background:#d9d9d9;">
![]()
="" class="event-icon">
="event-text">Home Solar"0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor">
="" class="event4" style="background:#d9d9d9;">
![]()
="" class="event-icon">
="event-text">Marine"0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor">
是鼠标快速移动会出现bug，如下图
出现这个问题看下面截图，注释了样式.megamenu-event中opacity:0（去掉opacity的动画效果），鼠标移出nav菜单时，#mega-off-grid-living不是马上消失（visibility:hidden在动画结束最后才会生效），所以只要在消失前快速移动到其他菜单下的子菜单，实际移动到的还是#mega-off-grid-living这个层，触发了绑定到这个容器中的hover，加上了megadisplay又显示出来了。
将样式中visibility:hidden改为display:none，同时megadiplay样式中的visibility:visible改为display:block就可以了
是把hover方法放在如下代码里面吗?
$(function(){
)
有可能是你页面上的元素还没加载完,他就跑完了,而上述代码里面的jquery事件是等页面加载完再绑定的
- 这篇博客也许可以解决你的问题👉 ：jquery 列表hover效果 ，css :hover ，jquery 事件委托，jquery hover()方法
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632