How to style siblings on hover in CSS?

Question

I am trying to apply a CSS color change on the siblings of a list of links under the following format:

<ul>
  {{ range .Pages }}
    <h2>
       <a class="item" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
    </h2>
  {{ end }}
</ul>

As I am working on Hugo, the list of links is the index of files in the folder, in this example there is a folder with 4 articles. In this case, I range over the pages of the folder (ie the 4 articles) which ends up being something like this:

.list-items a:hover.item:not(:hover) {
  color: lightgray;
}

.item {
  color: black;
  transition: color 0.3s ease;
}

<ul class="list-items">
  <h2>
    <a class="item" href="article1">Article1 Title</a>
  </h2>
  <h2>
    <a class="item" href="article2">Article2 Title</a>
  </h2>
  <h2>
    <a class="item" href="article3">Article3 Title</a>
  </h2>
  <h2>
    <a class="item" href="article4">Article4 Title</a>
  </h2>
</ul>

More articles will be added in the future, so the goal is to have all the links in black by default and when hovering, the one being hovered remains black while all the siblings color changes to lightgray.

I unfortunately haven't been able to apply the desired effect with the following CSS:

.item {
  color: black;
  transition: color 0.3s ease;
}

.list-items a:hover.item:not(:hover) {
  color: lightgray;
}

I have tried the following code:

.item {
  color: black;
  transition: color 0.3s ease;
}

.list-item a:hover.item:not(:hover) {
  color: lightgray;
}

and:

.item {
  color: black;
  transition: color 0.3s ease;
}

.list-item:hover.item:not(:hover) {
  color: lightgray;
}

Any clue what I'm missing?

Thanks!

Answer 1

and when hovering, the one being hovered remains black while all the siblings color changes to lightgray

.list-items:hover .item { color: lightgray; } to change the color of all items, when the container gets hovered, and .list-items .item:hover { color: black; } to re-set it to black for the specific link that is hovered.