CODEWITHSUNDEEP
javascriptjquerycsseventtriggermouseleave
Muhammad Kashif
Muhammad Kashif

Reputation: 131

Trigger ('mouseleave') - not working as desired on mobile

I have a burger menu button in the header which opens and closes the menu. And I have hover and focus animations for it.

So when the menu is clicked or tapped or touched (on mobile devices) - the second time it loses the hover and focus styles. Everything in the code below is working perfectly, but the trigger mouseleave isn't working. I tested my code and found out that on mobile devices when a person clicks on a button, hover animation applies there too. So trigger mouseleave should cancel the hover effects I have on my burger menu button, but it isn't working.

I have tried everything: I have put this in setTimeout function and tried other different events, too (like testing it out in different browsers). Yet nothing seems to remove that hover animation on mobile devices when a user touches or clicks this burger menu button. Please help, as I have been stuck on this for two days.

//losing focus for menu toggler on smaller devices
var loseFocusMenu = 0;
$(".c-header-nav__toggle").on("click touch", function(){
    if (loseFocusMenu === 0){
        loseFocusMenu++;
    }else if(loseFocusMenu === 1){
        $(".c-header-nav__toggle").trigger('mouseleave');
        $(".c-header-nav__toggle").trigger('blur');
        loseFocusMenu--;
    }
    
});

I am developing a Wordpress theme, so I am using that platform (and obviously that's jquery in the code). Please help

Also that hover and focus animations are coming from internal styling in the style tag and coming from another class that's assigned to the same burger menu button

Upvotes: 0

Views: 381

Answers (1)

Muhammad Kashif
Muhammad Kashif

Reputation: 131

i solved the issue with adding and removing classes. if your hands are tied and u can't do it any other way like in my case than this is the work around

Upvotes: 1

Related Questions