影响悬停元素之前声明的元素[重复]答案

【问题标题】：Affecting elements declared before an element on hover [duplicate]影响悬停元素之前声明的元素[重复]
【发布时间】：2019-05-12 01:01:43
【问题描述】：

给定 HTML 代码：

<html>
  <body>
    <div class="one"></div>
    <div class="two"></div>
  </body>
</html>

还有 CSS 代码：

.one {height: 50px; width: 50px; background-color: orange;}
.two {height: 50px; width: 50px; background-color: yellow;}
.one:hover ~ .two {opacity: 0.5;}
.two:hover ~ .one {opacity: 0.5;}

我正在尝试这样做：当一个div 悬停在上面时，它会影响另一个div。

当我将鼠标悬停在.one 上时，.two 会受到影响。但是，当我将鼠标悬停在 .two 上时，.one不受到影响。

这是为什么？我该如何解决这个问题？

【问题讨论】：

标签： html css hover

【解决方案1】：

使用+ 属性。它会影响下一个兄弟姐妹，反之亦然。

.one:hover + .two {}

【讨论】：