Change to a relative color on hover in modern CSS

Question

I want react to hovering on a link:

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

…to alter slightly the background color around the text. Rather than specify a certain color, I want to just lighten or darken whatever the inherited color as currently set. For hover and active on a link, I want the background color to change, to give something of the effect of a button being pressed.

I want to be able to alter the background color of the text or page without having to alter the specific color in the a:hover rule too.

Answer 1

You can use filter: brightness(), although you also have to specify a particular color on the body background and background of a to be inherit. The default value of background-color is transparent and cannot be darkened. It needs to be changed to inherit to get a particular color so that darkening can work. If it is transparent, the alpha is 0 and is not subject to darkening or brightening.

However, if the link is inside a div and the div doesn't have a specific background color, then it'd be transparent, and the link would inherit that background color. So the link needs to have a particular background color to be darkened.

I did a window.getComputedStyle($0)["background-color"] where the $0 was the div selected in the developer's console, and the result was "rgba(0, 0, 0, 0)", meaning transparent.

body { background: white }

a { background: inherit; border-radius: 2px }

a:hover {
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
    filter: brightness(.8);
}

<a href="http://www.google.com">Google</a>

Answer 2

I generally use HSL color values for such a scenario. No need to copy around colors between everything, just change the lightness portion of it.

HSL color values are specified with: hsl(hue, saturation, lightness).

a {
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem 0;
  padding: 1rem 2rem;
  color: white;
}

.color {
  --hue: 281;
  --saturation: 100%;
  --lightness: 60%;
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));
}

.color.light:hover {
  --lightness: 80%;
  /* 20% light */
}

.color.dark:hover {
  --lightness: 40%;
  /* 20% dark */
}

<a class='color light'>lighten</a>
<a class='color dark'>darken</a>

Answer 3

…to alter slightly the background color around the text.

If you want the color exactly around text then text-shadow can be used:

a {
  font: bold 2em serif;
  text-decoration: none;
  margin-right: 5px;
  color: inherit;
}

a:hover {
  text-shadow: 1px 0px 2px #000, 1px 0 9px #000;
  /* text-shadow: 1px 0px 2px #000, -1px 0 2px #000; */
}

a:active {
  text-shadow: 0px 0px 6px #000, 1px 1px 2px #000;
  color: #fff8;
  filter: contrast(20) opacity(0.5);
}

<div style="background-color: white; color:blue ">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</div>
<div style="background-color: wheat; color:#D06224 ">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</div>
<div style="background-color: lightgreen; color:#172774">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</div>
<div style="background-color: lightseagreen; color: lightsalmon">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</div>

The shadow automatically gets blurred depending on the blur-radius and blends with the background. You don't have to provide extra opacity.
On hover I am darkening the area around the text and on click(active), I am making text transparent so that it takes background color.