對第一個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>