Jquery on hover add class to another element simply not working

Question

I appreciate there are many similar posts on here but none seem to address why this code is not working.

The idea is, when a menu li is hovered the background of the menu should change using CSS.

I found the code on StackOverflow

add class to a div when hover another one (Javascript)

but in my case, it simply does not work even when running at the very end of the footer.

<script>
   jQuery(document).ready(function() {
     jQuery('#responsive-menu-item-48473').hover(function(){     
           jQuery('#responsive-menu-container').addClass('blue');    
       },function(){    
          jQuery('#responsive-menu-container').removeClass('blue');     
       });
   });
</script>

Additional info...

cut down html for the menu:

<button id="responsive-menu-button" class="responsive-menu-button responsive-menu-boring responsive-menu-accessible" type="button" aria-label="Menu">                
    <span class="responsive-menu-label responsive-menu-label-left">
        <span class="responsive-menu-button-text">Menu</span>
    </span>

    <span class="responsive-menu-box">
        <span class="responsive-menu-inner"></span>
    </span>                
</button>

<div id="responsive-menu-container" class="slide-left">
    <div id="responsive-menu-wrapper">
        <div id="responsive-menu-title">
            Main Menu
        </div>

        <ul id="responsive-menu" class="">
            <li id="responsive-menu-item-57071" class=" menu-item menu-item-type-custom menu-item-object-custom responsive-menu-item"><a href="http://localhost/wordpress-updates/fx/my-account/customer-logout/" class="responsive-menu-item-link">Logout</a></li>
            <li id="responsive-menu-item-48473" class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-16137 current_page_item responsive-menu-item responsive-menu-current-item"><a title="Home" href="http://localhost/wordpress-updates/" class="responsive-menu-item-link">Home</a></li>
        </ul>
    </div>
</div>

Haven't got as far creating the classes yet, not that that should matter?

How do you know it's not working? Could be your style rules aren't specific enough. Provide a minimal reproducible example that reproduces problem — charlietfl
– charlietfl, Commented Dec 7, 2017 at 11:10

Hiren Vaghasiya · Accepted Answer · 2017-12-07 11:28:39Z

It is working check her, I think you missed to add jquery

jQuery(document).ready(function() {
     jQuery('#responsive-menu-item-48473').hover(function(){     
           jQuery('#responsive-menu-container').addClass('blue');    
       },function(){    
          jQuery('#responsive-menu-container').removeClass('blue');     
       });
   });

.blue{
background-color:#0000ff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="responsive-menu-button" class="responsive-menu-button responsive-menu-boring responsive-menu-accessible" type="button" aria-label="Menu">                
            <span class="responsive-menu-label responsive-menu-label-left">
                <span class="responsive-menu-button-text">Menu</span>
            </span>

            <span class="responsive-menu-box">
                <span class="responsive-menu-inner"></span>
            </span>                
        </button>

        <div id="responsive-menu-container" class="slide-left">
            <div id="responsive-menu-wrapper">
                <div id="responsive-menu-title">
                    Main Menu
                </div>

        <ul id="responsive-menu" class="">
            <li id="responsive-menu-item-57071" class=" menu-item menu-item-type-custom menu-item-object-custom responsive-menu-item"><a href="http://localhost/wordpress-updates/fx/my-account/customer-logout/" class="responsive-menu-item-link">Logout</a></li>
            <li id="responsive-menu-item-48473" class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-16137 current_page_item responsive-menu-item responsive-menu-current-item"><a title="Home" href="http://localhost/wordpress-updates/" class="responsive-menu-item-link">Home</a></li>
        </ul>
    </div>
    </div>

that it!! cant believe I missed that, been staring at this for a while now!

kingmaker · Accepted Answer · 2017-12-07 11:27:43Z

0

Looks like the code is correct.....

The CSS rules might not be correct to reflect the changes. Try inspecting elements and hover over jQuery('#responsive-menu-item-48473')

answered Dec 7, 2017 at 11:27

kingmaker

596 bronze badges

Comments

Karan Mehta · Accepted Answer · 2017-12-07 11:31:42Z

Its working good.

  jQuery(document).ready(function() {
     jQuery('#responsive-menu-item-48473').hover(function(){     
           jQuery('#responsive-menu-container').addClass('blue');    
       },function(){    
          jQuery('#responsive-menu-container').removeClass('blue');     
       });
   });

.blue{
color:green;
background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="responsive-menu-label responsive-menu-label-left">
            <span class="responsive-menu-button-text">Menu</span>
        </span>

        <span class="responsive-menu-box">
            <span class="responsive-menu-inner"></span>
        </span>

    </button><div id="responsive-menu-container" class="slide-left">
        <div id="responsive-menu-wrapper">
            <div id="responsive-menu-title">
                Main Menu
            </div>

    <ul id="responsive-menu" class="">
        <li id="responsive-menu-item-57071" class=" menu-item menu-item-type-custom menu-item-object-custom responsive-menu-item"><a href="http://localhost/wordpress-updates/fx/my-account/customer-logout/" class="responsive-menu-item-link">Logout</a></li>
        <li id="responsive-menu-item-48473" class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-16137 current_page_item responsive-menu-item responsive-menu-current-item"><a title="Home" href="http://localhost/wordpress-updates/" class="responsive-menu-item-link">Home</a></li>
    </ul>
</div>
</div>

Collectives™ on Stack Overflow

Jquery on hover add class to another element simply not working

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related