как при наведении на элемент меню или выпадающего списка этого меню изменить класс родителя меню?

Question

если курсор находится на #categories или выпадающем меню .sub-menu то нужно удалить класс sticky , а если увели курсор то вернуть обратно

<div id="sticky" class="site-header sticky">
    <ul>
        <li id="categories">
            <ul class="sub-menu">
                <li>
                    <a href="">1</a>
                </li>
                <li>
                    <a href="">2</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

$( "#categories" ).mouseover(function() {
            $( "#sticky" ).removeClass('sticky');

        });

Answer 1

$("#categories").on('mouseenter', function() {
  $("#sticky").removeClass('sticky');
});

$("#categories").on('mouseleave', function() {
  $("#sticky").addClass('sticky');
});

/* Более короткий вариант, но в теории -- менее надежный 

$( "#categories" ).on('mouseenter mouseleave',      function() {
  $( "#sticky" ).toggleClass('sticky');
});

*/

.sticky {
  /* для демонстрации */
  background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky" class="site-header sticky">
  <ul>
    <li id="categories">
      <ul class="sub-menu">
        <li>
          <a href="">1</a>
        </li>
        <li>
          <a href="">2</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

БЛОГ НА HUSL

как при наведении на элемент меню или выпадающего списка этого меню изменить класс родителя меню?

Ответы (1 шт):