const w_phones = document.querySelectorAll('.w-nav__btn');
w_phones.forEach(w_phone => {
const item_data = w_phone.dataset.phone
const item = document.getElementById(item_data);
console.log(item)
w_phone.onmouseover = function () {
item.classList.add('active')
};
w_phone.onmouseout = function () {
item.classList.remove('active')
};
});
I need to convert this code to React. Code of buttons look like this enter image description here
Class active must be here enter image description here "w-phones__item w-phones__item--1 active" and on 2, 3
How to fix this? THIS
There's no need for javascript if all you want to do is add a css class. The :hover pseuedoselector will only take effect when the user is hovered over the .w-nav__ and you can apply the style to the phone items below it like this.
.w-nav__btn:hover .w-phone__item {
color: red;
}