Изменить цвет элементов родственного элемента при наведении курсора, используя CSS
Ниже мой HTML
<h1>Heading</h1>
<a class="button" href="#"></a>
Что я хочу сделать, это когда я парю <a> тег, я хочу изменить цвет <h1> помечать чисто с помощью CSS. Как мне этого добиться?
PS ----- * Отредактировано * ----------
Что если я оберну вокруг него div с идентификатором?
<div id="banner">
<h1>Heading</h1>
<a class="button" href="#"></a>
</div>
Это поможет?
11 ответов
Не существует селектора CSS, который может это сделать (даже в CSS3). Элементы в CSS никогда не знают своего родителя, поэтому вы не можете a:parent h1 (например). Они также не знают своих братьев и сестер (в большинстве случаев), поэтому вы не можете сделать #container a:hover { /* do something with sibling h1 */ }, По сути, свойства CSS не могут изменять ничего, кроме элементов и их дочерних элементов (они не могут получить доступ к родителям или братьям и сестрам).
Вы могли бы содержать h1 в пределах a, но это сделало бы ваш h1 также
Вы сможете достичь этого только с помощью JavaScript ( подтверждение концепции jsFiddle). Это будет выглядеть примерно так:
$("a.button").hover(function() {
$(this).siblings("h1").addClass("your_color_class");
}, function() {
$(this).siblings("h1").removeClass("your_color_class");
});
Вы можете сделать брата, который следует за изменением элемента, когда этот элемент наведен, например, вы можете изменить цвет вашего a ссылка, когда h1 завис, но вы не можете повлиять на предыдущего брата таким же образом.
h1 {
color: #4fa04f;
}
h1 + a {
color: #a04f4f;
}
h1:hover + a {
color: #4f4fd0;
}
a:hover + h1 {
background-color: #444;
}<h1>Heading</h1>
<a class="button" href="#">The "Button"</a>
<h1>Another Heading</h1>Мы устанавливаем цвет H1 на зеленоватый оттенок, а цвет A, который является родным H! красноватый (первые 2 правила). Третье правило делает то, что я описываю - изменяет цвет A, когда H1 зависает.
Но обратите внимание на четвертое правило a:hover h1 изменяет только цвет фона H1, который следует за якорем, но не тот, который предшествует ему.
HTML:
<div id="banner">
<h1>Heading</h1>
<a class="button" href="#">link</a>
</div>
CSS:
#banner:hover h1 {
color: red;
}
#banner h1:hover {
color: black;
}
a {
position: absolute;
}
Скрипка: http://jsfiddle.net/joplomacedo/77mqZ/
a элемент абсолютно позиционирован. Может не быть идеальным для вашей существующей структуры. Дайте мне знать, я могу найти обходной путь.
Прежде всего, я использую stackru много лет и хочу поблагодарить вас всех за прекрасные ответы и помощь. Однако пришло время зарегистрироваться и предложить свою помощь кому-то, кто борется с этим, даже если этот вопрос довольно старый:
Это действительно возможно с помощью всего лишь нескольких строк CSS и некоторого базового понимания Flexbox. Как сказал Стивен П. в своем ответе, комбинатор соседних братьев и сестер выбирает сразу следующих братьев и сестер. Чтобы добиться того, о чем просил OP, вы можете использовать два гибких подхода:
Подход 1 ( с использованием сокращенного свойства "flex-flow")
.flex-parent {
display: flex;
flex-flow: column-reverse wrap
}
.flex-child-1:hover + .flex-child-2 {
color: #FF3333;
}
<div class="flex-parent">
<a class="flex-child-1">Hover me</a>
<h1 class="flex-child-2">I am changing color</h1>
</div>
Подход 2 ( с использованием свойства "порядок" и нескольких дочерних элементов)
.flex-parent {
display: flex;
flex-direction: column;
}
.flex-child-1 {
order: 2;
}
.flex-child-2 {
order: 1;
}
.flex-child-3 {
order: 3;
}
.flex-child-1:hover+.flex-child-2 {
color: #FF3333;
}
<div class="flex-parent">
<h1 class="flex-child-3">I am not changing color</h1>
<a class="flex-child-1">Hover me</a>
<h1 class="flex-child-2">I am changing color</h1>
</div>
Бонус:
Попробуйте это однострочное решение на чистом CSS:
.parent:hover .child:not(:hover) {
/* this style affects all the children *except* the one you're hovering over */
color: red;
}
Подробнее здесь: https://codyhouse.co/nuggets/styling-siblings-on-hover
http://plnkr.co/edit/j5kGIav1E1VMf87t9zjK?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
ul:hover > li
{
opacity: 0.5;
}
ul:hover li:hover
{
opacity: 1;
}
</style>
</head>
<body>
<h1>Hello Plunker!</h1>
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</body>
</html>
Вот пример, как это можно сделать в чистом CSS, надеюсь, это кому-нибудь поможет
Кто-то помог мне с этим, поэтому я подумал, что тоже поделюсь здесь.
В вашем первом примере это действительно невозможно с чистым CSS. Однако, когда вы оборачиваете его родительским контейнером, у вас появляется возможность делать кучу вещей с зависающими дочерними элементами.
#banner:hover>h1{
color:red;
}
h1:hover{
color:black !important;
}
#banner{
display:inline-block;
}
.button{
display:inline-block;
font-size:24px;
width:100%;
border:1px solid black;
text-align:center;
}
h1{
padding:0;
margin:0;
}
<div id="banner">
<h1>Heading</h1>
<a class="button" href="#">Button!</a>
</div>
Родитель просто контролирует детей, которые в данный момент не зависают. Затем вы можете установить состояния при наведении курсора для отдельных элементов и классов, чтобы сделать выбор родственных объектов возможным без JS.
Вот более сложный пример этого в действии
Вот решение, которое я реализовал, чтобы получить поведение, показанное в прикрепленном .gif.
CSS:
.features-container:has(.feature-card:hover) .feature-card {
opacity: 0.25;
}
.feature-card:hover {
opacity: 1 !important;
transform: scale(105%);
filter: drop-shadow(1px 1px 10px rgba(255, 255, 255, 0.25));
}
HTML:
<div class="features-container">
<div
onclick="window.location.href='/branding.html'"
class="feature-card"
>
<img src="/assets/home-page/1_Tyson.jpg" alt="Mike Tyson Flexing" />
<h2>Branding</h2>
</div>
<div
onclick="window.location.href='/design.html'"
class="feature-card"
>
<img
src="/assets/home-page/2_Design.jpg"
alt="Mike Tyson Flexing"
/>
<h2>Design</h2>
</div>
<div
onclick="window.location.href='/automotive.html'"
class="feature-card"
>
<img
src="/assets/home-page/3_Automotive.jpg"
alt="Mike Tyson Flexing"
/>
<h2>Automotive</h2>
</div>
<div onclick="window.location.href='/art.html'" class="feature-card">
<img src="/assets/home-page/4_Art.jpg" alt="Mike Tyson Flexing" />
<h2>Art</h2>
</div>
<div onclick="window.location.href='/more.html'" class="feature-card">
<img
src="/assets/home-page/5_Special_Services.jpg"
alt="Mike Tyson Flexing"
/>
<h2>More</h2>
</div>
</div>
Короче говоря, мы хотим сначала подтвердить, что наш контейнер ( в данном случае .features-container ) ИМЕЕТ наведенный элемент. Если да, уменьшите непрозрачность класса .feature-card .
Однако, поскольку CSS применяет наши правила по порядку, наше следующее правило переопределит непрозрачность 0,25 для конкретного элемента, над которым мы наводим курсор. Примечание. В данном конкретном случае мы должны использовать !important, чтобы переопределить ранее установленное правило непрозрачности.
Опять же, взгляните на прикрепленный GIF-файл, чтобы увидеть хороший пример того, что здесь происходит. Этого, конечно, можно добиться с помощью JS, но зачем это делать, если CSS предоставляет гораздо более простое решение?
Измените тег H1 на ссылку, возможно, стилизуйте его так же, как обычный текст? И затем используйте это,
a:link {color:#FF0000;}
a:hover {color:#FF00FF;}
И это должно работать, когда вы наводите курсор:), вы также можете сделать его конкретным, поместив его в элемент div, а затем нацелив его так:
.exampledivname a:link {color:#FF0000;}
.exampledivname a:hover {color:#FF00FF;}
Это должно помочь.
Это может сработать, недавно я использовал эту идею, чтобы остановить элементы-братья в анимации.
h1 { color: inherit; }
#banner:hover { color: your choice; }
Для заданных стилей в родственных элементах вы можете использовать символ ~ в первом случае, когда h1 зависает, установить цвет для тега, а во втором случае, когда наведен курсор, изменить цвет фона раздела h1
h1:hover ~ a {
color: #e34423;
}
a:hover ~ h1 {
background-color: #eee;
}