CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
blackhill24
blackhill24

Reputation: 452

Jquery on hover add class to another element simply not working

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?

Upvotes: 0

Views: 4600

Answers (3)

Karan Mehta
Karan Mehta

Reputation: 415

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>

Upvotes: 0

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

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>

Upvotes: 3

kingmaker
kingmaker

Reputation: 59

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')

Upvotes: 0

Related Questions