CODEWITHSUNDEEP
javascriptjquerycssjquery-hover
Paul Designer
Paul Designer

Reputation: 875

How to stop Jquery hover in media queries?

I have created a nav with jquery hover effects.

The nav works, the only problem is when you make the screen 800px wide or less and press the red box to display the toggle nav. The hover menu is picking up the jquery from the full width menu.

How can I stop the jquery hover menu from not picking up the hover state of the main menu.

http://jsfiddle.net/n8zqS/2/

/*  MAIN MENU DROPDOWN
===================================*/
$("#toggle-nav").click(function () {
    $("#nav").slideToggle('slow');
});
/*  MAIN SETTINGS SHOW AND HIDE
===================================*/

$("#user-profile").hover(function(){
    $('.tabs').fadeToggle();
});

Upvotes: 1

Views: 797

Answers (1)

Evan
Evan

Reputation: 825

Just check the width of the browser in your hover handler:

$("#user-profile").hover(function(){
    if ( $(window).width() > 800 ) $('.tabs').fadeToggle();
});

Upvotes: 3

Related Questions