Как стилизовать братьев и сестер при наведении курсора в CSS? ⇐ CSS

[Anonymous]

Я пытаюсь применить изменение цвета CSS к дочерним элементам списка ссылок в следующем формате:

Код: Выделить всё

[list]
{{ range .Pages }}

[url={{ .RelPermalink }}]{{ .LinkTitle }}[/url]

{{ end }}
[/list]

Поскольку я работаю над Хьюго, список ссылок — это индекс файлов в папке, в этом примере есть папка с 4 статьями. В данном случае я просматриваю страницы папки (т.е. 4 статьи), что в итоге получается примерно так:

< div class="snippet-code">

Код: Выделить всё

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

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

Код: Выделить всё

[list]

[url=article1]Article1 Title[/url]


[url=article2]Article2 Title[/url]


[url=article3]Article3 Title[/url]


[url=article4]Article4 Title[/url]

[/list]

В будущем будут добавлены дополнительные статьи, поэтому цель состоит в том, чтобы все ссылки по умолчанию окрашены в черный цвет, и при наведении курсора одна из них остается черной, а цвет всех одноуровневых ссылок меняется на светло-серый.
К сожалению, мне не удалось применить желаемый эффект с помощью следующий CSS:

Код: Выделить всё

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

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

Я попробовал следующий код:

Код: Выделить всё

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

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

и:

Код: Выделить всё

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

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

Есть идеи, чего мне не хватает?
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/786 ... ver-in-css