拆分幻灯片兄弟姐妹，一个兄弟姐妹在悬停时影响另一个

Question

我试图实现与 Navy.com 标题类似的效果，您将鼠标悬停在一个兄弟姐妹上，它会滑动以占用大部分空间，同时缩小和隐藏另一个兄弟姐妹的内容。

由于CSS标准不能选择以前的兄弟，所以我只能实现一侧而不是另一侧的效果。我知道仅使用 CSS 可能无法做到这一点。

预先感谢您的帮助！

这是我目前正在使用的代码：

.container {

  display: flex;

  flex-direction: row-reverse;

}

.b1 {

  display: flex;

  order: 2;

  width: 50%;

  height: 150px;

  padding: 10px;

  background-color: rgb(40, 251, 202);

  transition: all 0.5s;

}

.b2 {

  display: flex;

  width: 50%;

  order: 1;

  height: 150px;

  padding: 10px;

  background-color: rgb(227, 29, 103);

  transition: all 0.5s;

}

.b1:hover {

  width: 80%;

}

.b2:hover {

  width: 80%;

}

.b1:hover~.b2 {

  background-color: rgba(227, 29, 103, 0.4);

  width: 20%;

}

.b2:hover~.b1 {

  background-color: rgba(40, 251, 202, 0.4);

  width: 20%;

}

.b1:hover~.b2 span {

  display: none;

}

.b2:hover~.b1 span {

  display: none;

}

<div class="container">

  <div class="b2">

    <span>This content will show up directly in its container.</span>

  </div>

  <div class="b1">

    <span>This content will show up directly in its container.</span>

  </div>

</div>

Answer 1

通过一些重组，您将能够仅使用 CSS 来实现您想要的效果。在这个实现中，我使用了:not CSS 选择器，并结合了一些多级:hover选择器（因为.container和.child占用相同的空间而起作用）虽然，只是作为一个建议：利用 flex 的自动增长，并width: 20%;完全删除逻辑。这样，未悬停组件的子组件将占用相等的空间，悬停的子组件仍将增长到 80% 的宽度。这将允许您动态添加更多项目，而无需更改硬编码的 CSS。.container {&nbsp; display: flex;}.child {&nbsp; width: 50%;&nbsp; height: 150px;&nbsp; padding: 10px;&nbsp; transition: all 0.5s;}.child--red {&nbsp; background-color: rgba(227, 29, 103, 1);}.container:hover .child--red:not(:hover) {&nbsp; background-color: rgba(227, 29, 103, 0.4);}.child--green {&nbsp; background-color: rgba(40, 251, 202, 1);}.container:hover .child--green:not(:hover) {&nbsp; background-color: rgba(40, 251, 202, 0.4);}.container:hover .child:not(:hover) span {&nbsp; display: none;}.container:hover .child {&nbsp; width: 20%;}.container:hover .child:hover {&nbsp; width: 80%;}<div class="container">&nbsp; <div class="child child--green">&nbsp; &nbsp; <span>This content will show up directly in its container.</span>&nbsp; </div>&nbsp; <div class="child child--red">&nbsp; &nbsp; <span>This content will show up directly in its container.</span>&nbsp; </div></div>