css - Is it possible to undo the colour change when a link is hovered? - Stack Overflow

admin管理员组

文章数量:1122826

Let's say I've got a link and that has some styling.

<a href="...">Link</a>

a {
    color: #f00;
}

a:hover,
a:focus {
    color: #c00;
}

Let's now say that I place a link in another component and want to change the link's colour.

<div class="thing">
    <a href="...">Another link</a>
</div>

.thing a {
    color: #0f0;
}

(Let's further say that there's some specificity wars going on so the hover style is still used - I can appreciate that in this example, the hover styles would be overridden by the component.)

My question is: is there a way that I can prevent the link colour changing on hover?

I've tried these sort of settings, nothing seems to be working.

/* These don't work */
.thing a:hover,
.thing a:focus {
    color: unset;
    color: revert;
    color: currentColor;
}

My use-case is that we're using a CSS library that's brought in through node_modules, so I can't directly affect the component (I can't do something like setting the colour to a CSS custom property and just setting the hover colour to reference that). I can add to it, but I don't know what colour the link would actually be, but it changes on hover. I'd prefer it not to and I'm looking for something that says "use the color value as if there was no state."

Let's say I've got a link and that has some styling.

<a href="...">Link</a>

a {
    color: #f00;
}

a:hover,
a:focus {
    color: #c00;
}

Let's now say that I place a link in another component and want to change the link's colour.

<div class="thing">
    <a href="...">Another link</a>
</div>

.thing a {
    color: #0f0;
}

(Let's further say that there's some specificity wars going on so the hover style is still used - I can appreciate that in this example, the hover styles would be overridden by the component.)

My question is: is there a way that I can prevent the link colour changing on hover?

I've tried these sort of settings, nothing seems to be working.

/* These don't work */
.thing a:hover,
.thing a:focus {
    color: unset;
    color: revert;
    color: currentColor;
}

My use-case is that we're using a CSS library that's brought in through node_modules, so I can't directly affect the component (I can't do something like setting the colour to a CSS custom property and just setting the hover colour to reference that). I can add to it, but I don't know what colour the link would actually be, but it changes on hover. I'd prefer it not to and I'm looking for something that says "use the color value as if there was no state."

• css

Share Improve this question Follow asked Nov 21, 2024 at 11:45 James LongJames Long 4,73611 gold badge2222 silver badges3030 bronze badges 0

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

Well, your question is a bit confusing. First let me rephrase for you:

You want first link to work as usual, i.e., it'll have color #f00 when loaded. On hover or focus, it should change it's color to #c00.

Then, you have this Another Link, where you want it have color #0f0 when loaded and you don't want it to change color on focus or hover.

Feel free to correct me if I understood it wrong :)

For this scenario, I have created a test.component.html, that looks like:

<a href="">First Link</a><br>
<a href="">Second Link</a><br>
<div class="thing">
    <a href="">Another Link</a>
</div>

Then, I created corresponding test.component.css, that looks like:

a {
    text-decoration: none;
    color: #f00;

    &:focus,
    &:hover {
        color: #c00;
    }
}

.thing {
    a {
        text-decoration: none;
        color: #0f0;

        &:focus,
        &:hover {
            color: #0f0;
        }
    }
}

Now see the result:

• Page on load

• Page on hovering First Link

• Page on hovering Another Link

Quick fix, just add this (>) in between thing and a tag as shown below

<style>
a {color: #f00;}
a:hover,a:focus {color: #c00;}
.thing>a {color: #0f0;}
</style>

本文标签： cssIs it possible to undo the colour change when a link is hoveredStack Overflow