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

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

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

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

.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>

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

К сожалению, мне не удалось применить желаемый эффект с помощью следующего 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;
}

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

Спасибо!

🤔 А знаете ли вы, что...
HTML5 внедряет форматирование и стилизацию с помощью CSS3 для создания более привлекательных веб-страниц.


60
3

Ответы:

Похоже, в селекторе классов, используемом в вашем CSS, есть небольшая ошибка. Имя класса в вашем HTML — list-items, но в CSS вы используете .list-item. Давайте исправим это, а также настроим CSS для достижения желаемого эффекта.

Вот исправленный CSS:

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

.list-items:hover .item {
color: lightgray;
}

.list-items .item:hover {
color: black;
}

Этот CSS заставит все ссылки .item внутри .list-items становиться светло-серыми при наведении курсора на любую часть .list-items. Однако конкретный .item, над которым наведен курсор, останется черным. Переход будет применяться для эффекта плавного изменения цвета.


Решено

и при наведении курсора тот, на которого наведен курсор, остается черным, в то время как цвет всех братьев и сестер меняется на светло-серый

.list-items:hover .item { color: lightgray; }, чтобы изменить цвет всех элементов при наведении курсора на контейнер, и .list-items .item:hover { color: black; }, чтобы снова установить его на черный цвет для конкретной ссылки, на которую наведен курсор.


Здесь я заменил <h2> на правильный <li>, поскольку вложение h2 в ul недопустимо. Затем я настроил CSS так, чтобы он имел тот же стиль, что и H2, и исправил синтаксис наведения в CSS.

.list-items a:hover {
  color: lightgray;
}

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

.list-header {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
<ul class = "list-items">
  <li class = "list-header">
    <a class = "item" href = "article1">Article1 Title</a>
  </li>
  <li class = "list-header">
    <a class = "item" href = "article2">Article2 Title</a>
  </li>
  <li class = "list-header">
    <a class = "item" href = "article3">Article3 Title</a>
  </li>
  <li class = "list-header">
    <a class = "item" href = "article4">Article4 Title</a>
  </li>
</ul>