jQuery hover() 出现页面刷新触发的bug

Question

jQuery hover() 出现页面刷新触发的bug

点击菜单切换页面时 会有一定概率出现没有hover到菜单，#mega-off-grid-living无故弹出的bug

<div class="megamenu-event" id="mega-off-grid-living">
               <div class="megamenu-event-box">                                               
                <a href="" class="event1" style="background:#d9d9d9;">
                   <img src="" class="event-icon">
                   <p class="event-text">RV<svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="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">
</path></svg>

                

                <a href="" class="event2" style="background:#d9d9d9;">
                   <img src="" class="event-icon">
                   <p class="event-text">Cabin<svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="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">
</path></svg>

                

                <a href="" class="event3" style="background:#d9d9d9;">
                   <img src="" class="event-icon">
                   <p class="event-text">Home Solar<svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="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">
</path></svg>

                

                <a href="" class="event4" style="background:#d9d9d9;">
                   <img src="" class="event-icon">
                   <p class="event-text">Marine<svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="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">
</path></svg>

                
               

Answer 1

是鼠标快速移动会出现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就可以了