在悬停状态期间如何影响同级元素？

Question

我正在Squarespace中创建一个分屏页面，但在尝试影响同级元素时遇到了麻烦。当我将鼠标悬停在一侧时，我希望该一侧增大而另一侧缩小。我可以使左侧工作，但是当我将鼠标悬停在右侧时，左侧不会收缩。

我尝试使用〜，但它只适用于一侧。

.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;
}

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

**.split.leftSide:hover~.rightSide,
.split.rightSide:hover~.leftSide {
  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>

当我将鼠标悬停在另一个元素上时，我希望同级元素缩小到25vw。

Answer 1

不幸的是，css中没有没有先前的兄弟选择器。

对于仅css的解决方法，假设容器中只有两个.split元素，请参见other answer。

有关更通用的解决方案，或者是纯css（有一些限制）或使用javascript，请参见此答案。

一个仅适用于CSS的解决方案（前提是您希望左右拆分保持不缩小状态）。

它只是针对每个元素上的:hover进行调整和增长，否则保持缩小。

或者有关使用javascript 达到效果的信息，请参见下文。

.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;
  transition: 1000ms all ease-in-out
}

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

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

  }

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

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

<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>

javascript / jquery解决方案：

jQuery(function($){
  $('.split').hover( function( ){
    var $el = $(this);
    if ( $el.is('.leftSide') )
    {
            $('.split.rightSide').removeClass('grow').addClass('shrink');
            $el.removeClass('shrink').addClass('grow');
    }
    else
    {
$('.split.leftSide').removeClass('grow').addClass('shrink');
            $el.removeClass('shrink').addClass('grow');
    }
  }, function( ){
    var $el = $(this);
    if ( $el.is('.leftSide') )
    {
            $('.split.rightSide').removeClass('shrink');
            $el.removeClass('grow');
    }
    else
    {
            $('.split.leftSide').removeClass('shrink');
            $el.removeClass('grow');
    }
  } )
});

    .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;
      transition: 1000ms all ease-in-out;
    }

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

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

.split.shrink {
      width: 25vw;
}
.split.grow {
      width: 75vw;
      z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 2

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>