Как привязать событие "mouseleave" к двум классам

Question

в DOM имеются такие элементы:

Кнопка с классом .btnchik;
<div> с классом - .btnchik-warn и ид #chik.

Простая Задача (Уже реализована);
По наведению на кнопку, к #chik добавляется класс show (display:block);
Проще говоря <div> появляется...

Теперь мне, нужна помощь, по реализации такой задачи:
событие mouseleave, должно быть у #chik и .btnchik;

Объяснение: Когда курсор уходит с поля #chik либо .btnchik, срабатывает событие mouseleave, и у ид #chik удаляется класс - show, в моём случае jQuery (.removeClass()).

Скрипт jQuery, который мне удалось реализовать:

$(document).ready(function(){
  $('.btnchik').on("mouseenter", function(){
    $('#chik').addClass('show');
    $('#chik').on("mouseleave", function(){
      $('#chik').removeClass('show');
    })
  });
});

p.s. Не обязательно jQuery, но особая благодарность что помощь осуществляется на нём.

Answer 1

Зачем так сложно, на Java-Script? Только CSS решение не подойдет?

.menuitem       > div { display:  none; padding: 1em; background: silver; }
.menuitem:hover > div { display: block; }

<div class="menuitem">
  <button>Menu</button>
  <div>Hello world!</div>
</div>

БЛОГ НА HUSL

Как привязать событие "mouseleave" к двум классам

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