Блог

Главная - Вопросы по программированию - Добавление класса при наведении, удаление класса при втором наведении

Добавление класса при наведении, удаление класса при втором наведении

#javascript #jquery

Вопрос:

Я хочу добавить класс при наведении, но не удалять его, когда мышь уходит. Вместо этого он должен быть удален при втором наведении курсора мыши. Итак, при наведении курсора мыши добавьте класс. Мышь оставляет класс. При повторном наведении курсора мыши класс удаляется.

Этот код добавляет класс, но если мышь покидает класс, он удаляется, чего я не пытаюсь достичь.

 jQuery('.menuButton').hover(function(){
  jQuery('.mainMenuDrop').addClass('show')
}, function() {
  jQuery('.mainMenuDrop').removeClass('show')
});

Комментарии:

1. что вы сделали до сих пор?

2. mouseenter и toggleclass

3. Пожалуйста, опубликуйте свой код

Ответ №1:

Чтобы выполнить ваше требование добавления при первой записи и удаления при второй записи, вы можете изменить существующий код:

 jQuery('.menuButton').hover(function(){
  jQuery('.mainMenuDrop').addClass('show')
}, function() {
  jQuery('.mainMenuDrop').removeClass('show')
});

для использования .toggleClass

 jQuery('.menuButton').hover(function(){
  jQuery('.mainMenuDrop').toggleClass('show')
}, function() {
  // nothing here
});

Поскольку .hover привязка jquery — это просто синтаксис для mouseenter and mouseleave и вам не нужен mouseleave , это можно упростить до:

 jQuery('.menuButton').on("mouseenter", function() {
  jQuery('.mainMenuDrop').toggleClass('show');
}); 
 div { border: 1px solid black; padding: 20px; width: 100px; }
.show { background-color: pink; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='menuButton'>point at me</div>
<div class='mainMenuDrop'>changes here</div>

Комментарии:

1. Спасибо, работает как шарм!

Метки: