Как при наведении мыши присвоить элементу класс?

Question

[Андрей Белый]

Есть 3-х уровневое меню, 2 и 3 уровни скрыты display: none. Необходимо при наведении на первый уровень показывать пользователю подменю этого пункта (2 и 3 уровни(т.е. убрать display:none)). Решил сделать это с помощью присвоения класса первому уровню при помощи событий onmouseenter и onmouseleav. Всё получилось кроме одной штуки. При наведении на любой пункт показывает только подменю первого пункта, пример:



Использую только JavaScript и BX JQ.

Comments

[Анатолий]

А псевдокласса :hover будет недостаточно?

[Андрей Белый]

Анатолий, идет, плавнее появление можно сделать?

[Andrew]

Андрей Белый, display не анимируется, с opacity, margin играйтесь

[Андрей Белый]

Andrew, проблема opacity в том, что подменю все равно будет на странице и независимо от ого, видно его или нет, его все равно можно будет использовать, не пойдет такой вариант

[Andrew]

Андрей Белый, z-index, height

[aby125]

Андрей Белый, id должен быть уникальным, а у вас этот айди menu_level1 повторяется. Из-за этого все проблемы. В целом, это плохая практика считается, использовать айди таким образом. Попробуйте переделать на классы.

[aby125]

Андрей Белый,
в js вместо этой строчки:

var myButtonClasses = document.getElementById("menu_level1").classList;

используйте эту:
var myButtonClasses = event.target.classList;
и заработает ваш вариант

[Андрей Белый]

aby125, по поводу плохой практики можно поподробнее или скиньте пожалуйста материал для ознакомления.
P.S. Решил все таки остановится на :hover, но спасибо за вариант

[aby125]

Андрей Белый, https://medium.com/@ABatickaya/хорошие-и-плохие-cs...
Так же, возможно этот ресурс вам поможет в будущем, когда чуть углубитесь в js
https://jstherightway.org/ru-ru/

[Андрей Белый]

aby125, спасибо, успехов вам!

Answer 1

[lUser L]

Если на css то как вариант через @keyframes
https://codepen.io/5h4dy_s/pen/WNQYGZM

upd
В твоем случае: https://codepen.io/5h4dy_s/pen/WNQYGKJ