JQuery adds a class when hovering over a specific width if the bootstrap popup window is shown

Question

I am using bootstrap with a dropdown. My anchor has a hover background color. But when the drop-down list shows that I want the parent content containing the drop-down list to lose the background color.

My HTML:

<nav class="navbar navbar-default av-nav" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav nav nav-tabs"> <li class="lia li1"><a href="#">Home</a></li> <li class="dropdown li2"><a class="dropdown-toggle" data-toggle="dropdown">About</a><span class="nav-arrow"></span> <div class="dropdown-menu"> <ul> <li><a href="#">Drop 1</a></li> <li><a href="#">Drop 2</a></li> <li><a href="#">Drop 3</a></li> </ul> </div> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav> 

My attempt:

  $( document ).ready(function() { var section = $('.av-nav .nav li a:hover'); var width = section.width(); if (width < 768) section.addClass('nobg'); }); 

CSS:

 .nobg {background: none!important;} 

What am I doing wrong that my code is not working?

Answer 1

You can use these events provided by bootstrap for dropdown menus:

show.bs.dropdown: This event fires immediately after the show instance method is called.

shown .bs.dropdown: This event is fired when the popup window becomes visible to the user (it will wait for the CSS transition to complete).

hide.bs.dropdown: This event is fired immediately after calling the hide instance method.

hidden.bs.dropdown: This event is fired when the popup menu ends up hidden from the user (it will wait for the CSS transition to complete).

Using:

 $('.dropdown').on('show.bs.dropdown', function () { // do something… // In your case var section = $('.av-nav .nav li a:hover'); var width = section.width(); if (width < 768){ section.addClass('nobg');} }) $('.dropdown').on('hide.bs.dropdown', function () { // do something… // In your case var section = $('.av-nav .nav li a:hover'); var width = section.width(); if (width < 768){ section.removeClass('nobg');} }) 

I think this will work, you may need to make some changes.

Answer 2

you also need to check if the window size will change. you can try this code.

 $( document ).ready(function() { var section = $('.av-nav .nav li a:hover'); var width = section.width(); if (width < 768){ section.addClass('nobg'); } $(window).resize(function(){ // on window resize call function to check window width. var section = $('.av-nav .nav li a:hover'); var width = section.width(); if (width < 768){ section.addClass('nobg'); } }); }); 

Answer 3

Use media queries:

 @media screen and (max-width:767px){ .nobg:focus {background: none!important;} } 

Add the class to the anchor tag.

 <a class="nobg"... 

Answer 4

a:hover pseudo-elements should not work in the jQuery selector.

The first solution is to use hover or on('hover') to fire the event.

Secondly, you need to use css @media with max-width 768.

Answer 5

You are missing $ , add this and try

  $( document ).ready(function() { var section = $('.av-nav .nav li a:hover'); var width = section.width(); if (width < 768) $(section).addClass('nobg'); });