Estoy tratando de hacer que cuando pases por encima de ciertos elementos en una página web, cambien al color aleatorio de una paleta predefinida.
He escrito un script básico en JS que selecciona de una paleta de colores existente.
const pal = ["93FFF2","F8A5FF","FFBA41","71FF5B","9D6CFF"] const txtCol = Math.floor(Math.random() * pal.length); console.log(txtCol, pal[txtCol]);Entonces, idealmente, podría usar el valor "txtCol" en mi CSS, así...
nav a:hover { color: (txtCol); }Obviamente, eso no funciona. ¿Hay alguna manera de que pueda lograr lo que quiero que haga esto? Muchas gracias :)
Puede hacer una combinación de variables css y variables de configuración con javascript para cada evento mouseenter (cuando comienza el desplazamiento):
nav a:hover { color: var(--hover-color); } const pal = ["93FFF2","F8A5FF","FFBA41","71FF5B","9D6CFF"] // every time the user starts hovering that element document.querySelector('nav a').addEventListener("mouseenter", (event) => { // pick the random color const txtCol = pal[Math.floor(Math.random() * pal.length)]; // set the css variable event.target.style.setProperty('--hover-color', '#' + txtCol) })