Я пытаюсь применить изменение цвета 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 для создания более привлекательных веб-страниц.
Похоже, в селекторе классов, используемом в вашем 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>