Este script está en un cursor Javascript personalizado. Funciona según lo previsto, sin embargo, quiero que el mouse reaccione de la misma manera cuando se desplaza sobre un solo elemento (img) que no es una a , que es el objetivo actual de la secuencia de comandos.
¿Hay alguna forma en que pueda adaptar el script para buscar esencialmente 'anclajes de destino o un elemento con una clase de .link' (por ejemplo)? ¿O tendría que duplicar el bloque de código y usar getElementsByClassName ? ¿Tal vez sería mejor usar algo como mis data- para apuntar elementos en lugar de todos los a ?
document.addEventListener("mousedown", function () { cursor.classList.add("cursor--click"); }); document.addEventListener("mouseup", function () { cursor.classList.remove("cursor--click"); }); a.forEach((item) => { item.addEventListener("mouseover", () => { cursorTrail.classList.add("cursor-trail--hover"); }); item.addEventListener("mouseleave", () => { cursorTrail.classList.remove("cursor-trail--hover"); }); }); a.forEach((item) => { const interaction = item.dataset.interaction; item.addEventListener("mouseover", () => { cursor.classList.add(interaction); }); item.addEventListener("mouseleave", () => { cursor.classList.remove(interaction); }); });Puede seleccionar elementos usando un selector de CSS arbitrario usando document.querySelectorAll
En tu caso, harías algo como esto:
let links = document.querySelectorAll('a, .link'); links.forEach((item) => { ... });