html - 如何在悬停状态下影响兄弟元素？

Question

<分区>

Answer 1

CSS 只能在 DOM 中向下或向右选择，不能向上或向左选择。

但是在这样的情况下，如果容器元素只包含这两个子元素，并且子元素周围没有任何空白，则您可以使它工作。然后，您可以利用悬停元素始终意味着同时悬停其父元素这一事实。

因此，您可以设置 .containerSplit:hover .leftSide 的宽度，以便在整个容器悬停时缩小左侧部分 - 包括悬停在右侧。由于我们不希望它在左侧悬停时缩小，因此我们修改该部分中的选择器，使其变为 .containerSplit:hover .split.leftSide:hover，这样左侧仍然当它自己悬停时会增长。

.Main-content {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
}

.containerSplit {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #333 !important;
}

.split {
  position: absolute;
  width: 50vw;
  height: 100vh;
  overflow: hidden;
}

.split.leftSide {
  left: 0;
  background-color: red;
  background-size: cover;
}

.containerSplit:hover .split.leftSide:hover { /* modified */
  position: absolute;
  content: "";
  width: 75vw;
  height: 100vh;
  background-color: red;
  z-index: 2;
}

.split.leftSide:hover~.rightSide,
.containerSplit:hover .leftSide { /* modified */
  width: 25vw;
}

.split.rightSide {
  right: 0;
  background-color: blue;
  background-size: cover;
}

.split.rightSide:hover {
  position: absolute;
  content: "";
  width: 75vw;
  height: 100vh;
  background-color: blue;
  z-index: 2;
}

.split.leftSide,
.split.rightSide,
.split.rightSide:before,
.split.leftSide:before {
  transition: 1000ms all ease-in-out;
}

<div class="containerSplit">
  <div class="split leftSide">
    <h1>The Designer</h1>
    <a href="#" class="button">Read More</a>
  </div>
  <div class="split rightSide">
    <h1>The Programmer</h1>
    <a href="#" class="button">Read More</a>
  </div>
</div>