Hover: change color to relative

Programming
, ,
1

Rewrite

I would like to change the background color of the text or page when a user hovers over a link or clicks on it. Instead of setting a specific color in the a:hover rule, I would like to lighten or darken the inherited color.

The following code should achieve this effect:

/* mouse over link */
a:hover {
    text-decoration: none ;
    border-bottom: 1px dotted ;
}
2

To lighten or darken the inherited color of a link when a user hovers over it or clicks on it, you can use the filter property in CSS. Here’s an example:

/* mouse over link */
a:hover {
    text-decoration: none ;
    border-bottom: 1px dotted ;
    filter: brightness(85%);
}

/* link clicked */
a:active {
    filter: brightness(70%);
}

In this example, the brightness value is used to lighten or darken the inherited color of the link. A value of 100% represents the original color, while a value of 0% represents black. A value between 0% and 100% will lighten or darken the color accordingly.