对第一个Div激活的悬停效果：在第二个Div后的元素Div

Question

我需要一个div上的悬停效果，以激活位于第二个div上的:: :: after元素。

这里我的代码：

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"; 
} 

亲切的问候， 米兰

Answer 1

添加选择之间+将实现你正在寻找的结果。它被称为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>