Javascript悬停问题

Javascript hover issues

本文关键字：问题 悬停 Javascript      更新时间：2023-09-26

当我使用jQuery的.hover()或Javascript的mouseenter()时，事件不仅在鼠标进入元素时触发，而且在鼠标穿过该元素中的任何元素时也会触发。如何停止此操作，使其仅在鼠标进入或退出该元素时触发，而子元素对事件没有影响？

       $(document).ready(function(){
            introAnimation();
            
            $('#nav-item1').hover(function() {
                $('#createSub').slideDown(300);
            });
            $('#nav-item1').mouseout(function() {
                $('#createSub').slideUp(300);
            });
            
            $('#nav-item2').hover(function() {
                $('#manageSub').slideDown(300);
            });
            $('#nav-item2').mouseout(function() {
                $('#manageSub').slideUp(300);
            });
            $('#nav-item3').hover(function() {
                $('#storeSub').slideDown(300);
            });
            $('#nav-item3').mouseout(function() {
                $('#storeSub').slideUp(300);
            });
        });

Hover有一个解除覆盖的方法。不需要mouseout事件，当您将鼠标悬停在嵌套的子元素上时会触发该事件：

   $(document).ready(function(){
        introAnimation();
        $('#nav-item1').hover(function() {
            $('#createSub').slideDown(300);
        },function() {
            $('#createSub').slideUp(300);
        });
        $('#nav-item2').hover(function() {
            $('#manageSub').slideDown(300);
        },function() {
            $('#manageSub').slideUp(300);
        });
        $('#nav-item3').hover(function() {
            $('#storeSub').slideDown(300);
        },function() {
            $('#storeSub').slideUp(300);
        });
    });

将其添加到处理程序中：

if( ev.target !== this ){ return; }

ev.target是鼠标事件触发的内容。this是将事件绑定到的内容

相关文章：