Как стилизовать братьев и сестер при наведении курсора в 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;
}
Есть идеи, чего мне не хватает?
Спасибо!
Приношу извинения за отсутствие описания и благодарю вас за ваше время и помощь. Я отредактировал свой пост для большей ясности. Я попытался добавить родительский контейнер в виде <ul> и попытался использовать ссылки a.
К вашему сведению: ul не может быть заголовков в детском возрасте, сначала нужно вставить li. (И тогда, вероятно, опустите h2, потому что это не совсем заголовки.)
«и при наведении курсора тот, на который наведен курсор, остается черным, в то время как цвет всех братьев и сестер меняется на светло-серый» — .list-items:hover .item { color: lightgray; }, чтобы изменить цвет всех элементов при наведении курсора на контейнер, и .list-items .item:hover { color: black; }, чтобы повторно установить его на черный для конкретной ссылки, которая зависает.
Это сработало, большое спасибо! Если вы хотите опубликовать ответ как ответ, чтобы я мог выбрать его как ответ и пометить как решенный, в противном случае я скопирую ваш комментарий, чтобы сделать это.
Ответы 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, над которым наведен курсор, останется черным. Переход будет применяться для эффекта плавного изменения цвета.
Здравствуйте и спасибо за вашу помощь! Я исправил опечатку, но этого недостаточно для достижения желаемого эффекта. Как упоминалось в комментарии выше, я отредактировал свой пост для большей ясности и деталей. Я считаю, что нацелился на неправильный селектор CSS и мне нужно больше структуры, поэтому я добавил родительский контейнер <ul>, хотя я все еще застрял на этом
и при наведении курсора тот, на которого наведен курсор, остается черным, в то время как цвет всех братьев и сестер меняется на светло-серый
.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>
a:hover.item:not(:hover)не имеет смысла. Элемент нельзя одновременно навести и не навести. «Есть подсказки, чего мне не хватает?» - правильный минимальный воспроизводимый пример проблемы для начала. Сейчас я даже не могу сказать, что на самом деле означает ваш «список ссылок в следующем формате». У вас есть несколько таких h2, содержащих по одной ссылке, или один h2, содержащий несколько ссылок?