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

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 {

  display: flex;

}

.child {

  width: 50%;

  height: 150px;

  padding: 10px;

  transition: all 0.5s;

}

.child--red {

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

}

.container:hover .child--red:not(:hover) {

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

}

.child--green {

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

}

.container:hover .child--green:not(:hover) {

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

}

.container:hover .child:not(:hover) span {

  display: none;

}

.container:hover .child {

  width: 20%;

}

.container:hover .child:hover {

  width: 80%;

}

<div class="container">

  <div class="child child--green">

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

  </div>

  <div class="child child--red">

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

  </div>

</div>