Changing a text color by javascript without changing its :hover color-CodePudding

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 ?

CodePudding user response：

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="" >test</a>
<a href="" >test</a>
<a href="" >test</a>
<a href="" >test</a>
<div>
    <label>
        Color name: <input type="text" id="txt-color" value="blue">
    </label>
    <input type="button" value="Set Color">
</div>

CodePudding user response：

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 >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 >hover me</div>
<label>
    Color name: <input type="text" id="txt-color" value="blue">
</label>
<input type="button" value="Set Color">