CODEWITHSUNDEEP
javascriptjqueryhoverjquery-events
Russell Strauss
Russell Strauss

Reputation: 1200

Javascript hover issues

When I user either jQuery's .hover() or Javascript's mouseenter(), the event triggers not only when the mouse enters the element, but also when the mouse crosses any element within that element. How can I stop this so that it only triggers when the mouse enters or exits that element, with the elements children having no effect on the event?

       $(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);
            });
        });

Upvotes: 0

Views: 123

Answers (2)

SeanCannon
SeanCannon

Reputation: 77966

Hover has a method for unhovering. No need for the mouseout event, which gets fired when you mouse over a nested child element: 

   $(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);
        });
    });

Upvotes: 3

user578895
user578895

Reputation:

add this within the handler:

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

ev.target is what the mouse event triggers on. this is what you bound the event to

Upvotes: 0

Related Questions