Tengo este javascript (a continuación) que agrega/elimina una clase cuando se pasa el cursor sobre un elemento de anclaje.
a.forEach(item => { item.addEventListener('mouseover', () => { cursor.classList.add('hover'); }); item.addEventListener('mouseleave', () => { cursor.classList.remove('hover'); }); }) Esto funciona, pero además me gustaría aplicar una clase diferente cuando se interactúa con dos botones de enlaces. Las clases son .swiper-button-prev y .swiper-button-next . Entonces, probablemente algo como hover-swiper-prev y hover-swiper-next dependiendo de con cuál se interactúe.
Básicamente, cuando paso el cursor sobre un carrusel de imágenes, me gustaría mostrar diferentes estilos de cursor (flechas) para cada enlace y rotar 180 grados (para que apunten hacia la izquierda/derecha) al cambiar a los 'bloques' anterior/siguiente.
Para el contexto, estoy usando este gran código para crear un cursor de mouse javascript personalizado (es para una cartera/un poco de diversión, así que está bien) : https://codepen.io/ntenebruso/pen/QWLzVjY
No estoy seguro de cómo se ve tu html, pero aquí hay un pequeño fragmento que podría ayudar. Agregué algo de css para demostrar.
const a = document.querySelectorAll("a"); const cursor = document.getElementById("cursor"); a.forEach((item) => { const interaction = item.dataset.interaction; item.addEventListener("mouseover", () => { cursor.classList.add(interaction); }); item.addEventListener("mouseleave", (event) => { cursor.classList.remove(interaction); }); }); .swiper-button-prev{ background-color:green; } .swipper-button-next{ background-color:yellow; } .hover-swiper-prev{ background-color:orange; } .hover-swiper-next{ background-color:pink; } <a href="" data-interaction="swiper-button-prev">Swipper prev</a> <a href="" data-interaction="swipper-button-next">Swipper next</a> <a href="" data-interaction="hover-swiper-prev">Hover prev</a> <a href="" data-interaction="hover-swiper-next">Hover next</a> <div style="width: 50px; height: 50px;" id="cursor"> cursor </div>