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') }; });Necesito convertir este código a React. El código de los botones se ve así, ingrese la descripción de la imagen aquí
La clase activa debe estar aquí ingrese la descripción de la imagen aquí "w-phones__item w-phones__item--1 active" y en 2, 3
¿Cómo arreglar esto? ESTE
No hay necesidad de javascript si todo lo que quiere hacer es agregar una clase css. El pseudoselector :hover solo surtirá efecto cuando el usuario se desplace sobre .w-nav__ y puede aplicar el estilo a los elementos del teléfono debajo de este.
.w-nav__btn:hover .w-phone__item { color: red; }