对第一个Div激活的悬停效果:在第二个Div后的元素Div
问题描述:
我需要一个div上的悬停效果,以激活位于第二个div上的:: :: after元素。对第一个Div激活的悬停效果:在第二个Div后的元素Div
这里我的代码:
a{
color:green;
}
div.one:hover div.two::after {
color: red;
content:"Zusatztext";
}
<a href="#">
<div class="one">
Text1
</div>
<div class="two">
Text2
</div>
</a>
我的猜测是,这是行不通的,因为第二个div不是第一个div的后代元素,对不对?
我可以将:悬停效果放在(链接)上,它可以工作。
在这里,这没有问题:
a:hover div.two::after {
color: red;
content:"Zusatztext";
}
亲切的问候, 米兰
答
添加选择之间+
将实现你正在寻找的结果。它被称为Adjacent sibling combinator
这将工作,如果兄弟是紧接在第一个元素之后,如果你需要添加更多的元素在之间你会使用~
。 General sibling combinator
试试这个:
a{
color:green;
}
div.one:hover + div.two::after {
color: red;
content:"Zusatztext";
}
<a href="#">
<div class="one">
Text1
</div>
<div class="two">
Text2
</div>
</a>
真棒,谢谢! – user838531