Question

Views

I want to change the colours of the other links when I hover on a single link.

For example, when I hover on a single link, the remaining links are a difference colour, ie yellow, but the one link that I hover is still blue.

a, a:visited, a:active {
  text-decoration: none;
  color: red;
}

a:hover {
  color: blue;
}

<div>
  <a href="#about">About</a>
  <a href="#projects">Projects</a>
  <a href="#contact">Contact</a>
</div>

about 4 years ago · Juan Pablo Isaza

Answer question

Accepted Answer · 2022-07-05T06:52:45.294Z

You can apply the hover selector for the parent.

a,
a:visited,
a:active {
  text-decoration: none;
  color: red;
}

.parent:hover a {
  color: yellow;
}

.parent a:hover {
  color: blue;
}

<div class="parent">
  <a href="#about">About</a>
  <a href="#projects">Projects</a>
  <a href="#contact">Contact</a>
</div>