Как правильно сделать затемнение при наведении на пункт меню?

Question

[NinjaSystems]

Добрый день.

Есть такая структура меню с выпадающим блоком:

• Пункт 1
  
  • 1
    
  • 2
    
  • 3
    
  
  
  

При наведении на Пункт 1 я затемняю весь фон, кроме пункта и выпадающего списка.
Использую такой метод:

$('.mainmenu__item').hover(function () {
let mainMenuItem = $('.mainmenu__item').parents();
$(mainMenuItem).addClass('blackout');
});

Я добавляю класс с затемнением ко всем вложенным элементам родителя, что бы при наведении на любой из них срабатывало затемнение. А как правильно теперь убрать это затемнение? Если использовать метод выше и событие hover заменить на mouseout, то срабатывает не так как надо.

Answer 1

[g905]

А зачем тут js? На css проще было бы подобное делать.
.mainmenu__item:hover .blackout {
background: rgba(0,0,0,.5)
}

Comments

[NinjaSystems]

Не подходит. Так как я уже использую hover у этого класса. Я код вынес в редактор, может так будет понятнее jsfiddle.net/NinjaSystems/e87Lj1vn/5