tengo este css:
.overlay-left-a { color:red; } .overlay-left-a:hover { color:black; }Y este javascript:
let gr1 = document.getElementsByClassName("overlay-left-a"); for (let i = 0; i < gr1.length; i++) { gr1[i].style.color = blue; }Pero deseo que mi javascript no cambie el color ': hover'.
¿Cuál es por favor la mejor manera?
En su caso, puede hacerlo así: cambie una variable CSS sin anular el color de desplazamiento. La parte principal es este CSS:
:root { --color: red; } .overlay-left-a { color: var(--color); } Entonces puedes cambiar el valor del color en :root así:
document.documentElement.style.setProperty("--color", "blue"); // Or whatever −−−−^^^^^^Ejemplo en vivo:
document.querySelector("input[type=button]").addEventListener("click", (e) => { // Get the color const color = document.getElementById("txt-color").value.trim(); // Apply it document.documentElement.style.setProperty("--color", color); }); :root { --color: red; } .overlay-left-a { color: var(--color); } .overlay-left-a:hover { color: black; } <a href="" class="overlay-left-a">test</a> <a href="" class="overlay-left-a">test</a> <a href="" class="overlay-left-a">test</a> <a href="" class="overlay-left-a">test</a> <div> <label> Color name: <input type="text" id="txt-color" value="blue"> </label> <input type="button" value="Set Color"> </div>Use otra clase, no estilos en línea, que use :not(:hover) para indicar que no se aplique a los elementos sobre los que se pasa el mouse. ( :not es la negación-pseudoclase , en la que puede poner un selector simple dentro).
.overlay-left-a.blue:not(:hover) { color: blue; } document.querySelector("input[type=button]").addEventListener("click", (e) => { e.currentTarget.disabled = true; let gr1 = document.getElementsByClassName("overlay-left-a"); for (let i = 0; i < gr1.length; i++) { gr1[i].classList.add("blue"); } }); .overlay-left-a { color:red; } .overlay-left-a:hover { color:black; } .overlay-left-a.blue:not(:hover) { color: blue; } <div class="overlay-left-a">hover me</div> <input type="button" value="Click To Change Color To Blue">En un comentario, indicó que el color se proporciona dinámicamente, por lo que lo anterior no funcionará para su situación específica.
Para hacer eso, puede usar una variable CSS como muestra mmh4all . Si no puede usar una variable CSS por algún motivo (navegadores obsoletos o algo así), puede agregar un elemento de style a su página:
document.querySelector("input[type=button]").addEventListener("click", (e) => { // Get the color const color = document.getElementById("txt-color").value.trim(); // Create or update a style element applying that color // to `.overlay-left-a` elements let style = document.getElementById("overlay-left-a-color"); if (!style) { style = document.createElement("style"); style.id = "overlay-left-a-color"; document.querySelector("head").appendChild(style); } style.textContent = `.overlay-left-a:not(:hover) { color: ${color}; }`; }); .overlay-left-a { color:red; } .overlay-left-a:hover { color:black; } <div class="overlay-left-a">hover me</div> <label> Color name: <input type="text" id="txt-color" value="blue"> </label> <input type="button" value="Set Color">