0
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

Artemij
  • 7
  • 1
  • 5
  • Close but i when i hover on button 2 w-phones__item--2 get class active and when hover on button 3 w-phones__item--3 – Artemij Apr 16 '22 at 17:44

1 Answers1

0

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;
}
nlta
  • 1,716
  • 1
  • 7
  • 17