Add class to a div if another div has a class

Question

I did a lot of searching and read dozens of questions and answers on this topic and wrote the following code but it won't work for some reason. I'm looking for help troubleshooting this.

This is what I want to happen:

When the user hovers over a menu item, a dropdown appears.

Then the entire header (currently has the ID #header) gets a new class (.header-new-class)

I found that when they hover over a menu item (li), the site automatically adds the class "open" to the menu item (the menu item already has the class.menu-item)

So my logic is, when the menu item has the class "open", it adds the class "header-new-class" to the div with the ID #header

This is a very cleaned up version of the HTML:

<div ID="header">

    <div>
    <div>
    <div>
    <div>
    <div>
        <nav>
        <nav>
            <div>
            <div>
                <ul>
                    <li class="menu-item open">

                    </li>
                </ul>
            </div>
            </div>
        </nav>
        </nav>
    </div>
    </div>
    </div>
    </div>
    </div>

</div>

This is the code I wrote:

$(document).ready(function(jQuery) {
    if ($('.menu-item').hasClass('open')) {
        $('#header').addClass('header-new-class');
    }
});

It's not working. What am I doing wrong?

Thanks in advance.

Answer 1

if you want to add a class on the header when the mouse is on the menu item, do it like this, if you also want to remove the class then use the commented code below. if you have questions, feel free to ask

 $(document).ready(function(){ $('.menu-item').on('mouseover',function(){ /*$('.menu-item').removeClass('open'); $(this).addClass("open");*/ if($(this).hasClass('open')){ $('#header').addClass('yourNewClass'); }else{ $('#header').removeClass('yourNewClass'); } }); /*$('.menu-item').on('mouseleave',function(){ $('.menu-item').removeClass('open'); $('#header').removeClass('yourNewClass'); });*/ });

 .yourNewClass.menu-item.open {color: red;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div ID="header"> <div> <div> <div> <div> <div> <nav> <nav> <div> <div> <ul> <li class="menu-item open"> item 1 </li> <li class="menu-item"> item 2 </li> <li class="menu-item"> item 3 </li> </ul> </div> </div> </nav> </nav> </div> </div> </div> </div> </div> </div>

Answer 2

Why you are set class for hover via jquery. CSS have functionality of :hover which give the same effect that you want.

 #header:hover{ background-color: lightBlue; }.menu-item:hover{ color: blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div ID="header"> <div> <div> <div> <div> <div> <nav> <nav> <div> <div> <ul> <li class="menu-item"> Sample Link 1 </li> <li class="menu-item"> Sample Link 2 </li> <li class="menu-item"> Sample Link 3 </li> </ul> </div> </div> </nav> </nav> </div> </div> </div> </div> </div> </div>

Answer 3

You can use same event many times. So, this is achievable with normal .hover .

   $(document).ready(function(){
   $('.menu-item').hover(function(){
      $('#header').addClass('header-new-class');
   },function(){
    /* function to remove class when hovering is over */
   })
    

If you absolutely need to check if the class open is present you can do it inside the hover function.

You can also use mouseenter and mouseleave

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector");