第一个Div激活时的悬停效果：在第二个Div

Question

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

这是我的代码：

＆＃13;

＆＃13;

a{
  color:green;
}
     
 div.one:hover div.two::after {
  color: red;
  content:"Zusatztext";
 }

＆＃13;

   <a href="#">
      <div class="one">
        Text1
      </div>
      <div class="two">
        Text2
      </div>
   </a>
    
    

＆＃13;

＆＃13;

＆＃13;

我的猜测是，它不起作用，因为第二个div不是第一个div的后代元素，对吗？

我可以将：悬停效果放在（链接）上，然后就可以了。

这在这里有效：

a:hover div.two::after {
      color: red;
     content:"Zusatztext";
 }

亲切的问候， 米兰

Answer 1

在选择器之间添加+将获得您正在寻找的结果。它被称为Adjacent sibling combinator

如果兄弟姐妹紧跟在第一个元素之后，如果您需要在两者之间添加更多元素，则可以使用~。 General sibling combinator

试试这个：

＆＃13;

＆＃13;

a{
    color:green;
}

div.one:hover + div.two::after {
      color: red;
     content:"Zusatztext";
 }

＆＃13;

<a href="#">
  <div class="one">
    Text1
  </div>
  <div class="two">
    Text2
  </div>
</a>

＆＃13;

＆＃13;

＆＃13;