I have this css :
.overlay-left-a {
color:red;
}
.overlay-left-a:hover {
color:black;
}
And this javascript :
let gr1 = document.getElementsByClassName("overlay-left-a");
for (let i = 0; i < gr1.length; i++) {
gr1[i].style.color = blue;
}
But I wish my javascript don't change the ':hover' color.
What is please the best way ?
In your case you can do it like this: Change a CSS variable without overriding the hover color. The main part is this CSS:
:root {
--color: red;
}
.overlay-left-a {
color: var(--color);
}
Then you can change the value of the color on :root like this:
document.documentElement.style.setProperty("--color", "blue");
// Or whatever −−−−^^^^^^
Live Example:
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 another class, not inline styles, that uses :not(:hover) to say not to apply it to hovered elements. (:not is the negation-pseudo class, which you can put a simple selector inside.)
.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">In a comment you've indicated that the color is provided dynamically, so the above won't work for your specific situation.
To do that, you can use a CSS variable as mmh4all shows. If you can't use a CSS variable for some reason (obsolete browsers or something), you can add a style element to your page:
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">