html - 悬停属性不适用于来自不同容器的 div

Question

我有两个不同的框，当我将鼠标悬停在其他地方时，我希望能够更改一个框的属性。

我想如果我把两个盒子都放在同一个容器里，它就会像你在我的 snippet here. 上看到的那样工作。这是我的 html 和 css:

.first {
  color: blue;
  background: black;
  width: 299px;
}
.first:hover + .second {
  background: red;
  color: white;
}
.second {
  color: red;
  background: black;
  width: 300px;
  margin-left: 10px;
}
.container {
  display: flex;
}

<div class="container">
  <div class="first">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam delectus quo corporis, n
  </div>
  <div class="second">
    Lorem ipsum dolor sit amet, consectetur adipisicing e et magnam rem, doloribus libero quas numquam esse in culpa!
  </div>
</div>

但是如果盒子不在同一个容器中，我怎么能做同样的事情呢？

提前致谢。

Answer 1

如果你使用 display: inline-block 你可以删除容器的使用，但是因为你在容器类上使用 display: flex 你不会有子项(第一个和第二个 div)拉伸(stretch)以填充容器高度的优势。您可以使用固定高度来使它们保持相同的高度。

.first{
  color: blue;
  background: black;
  width: 299px;

  display: inline-block;
}
.first:hover + .second {
  background: red;
  color: white;
}
.second{
  color: red;
  display: inline-block;
  background: black;
  width: 300px;
  margin-left: 10px;
}

<div class="first">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam delectus quo corporis, n
  </div>
  <div class="second">
  Lorem ipsum dolor sit amet, consectetur adipisicing e et magnam rem, doloribus libero quas numquam esse in culpa!
  </div>