How to affect a sibling element during a hover state?

Question

I am creating a split screen page in Squarespace and I am having trouble trying to affect a sibling element. When I hover over one side, I want that one to grow and the other to shrink. I can get the left side to work, however when I hover over the right side, the left does not shrink.

I have tried to use ~ and it works, but only for one side.

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

I want the sibling element to shrink to 25vw when I hover over another element.

unfortunately there is no previous sibling css selector. if you want the left/right to be shrinked by default then simply make them shrink by default and grow only on hover. For this you do not need sibling selectors, only targeting `:hover` on the elements themselves — Nikos M., May 06 '19 at 07:04
unless you want to use javascript to achieve what you need, there is no css only alternative — Nikos M., May 06 '19 at 07:08

Nikos M. · Answer 1 · 2019-05-06T08:01:32.963

Unfortunately there is no previous sibling selector in css.

For a css-only workaround, provided there are only two .split elements in container see other answer.

For a more general solution, either css-only (with some limitations) or with javascript see this answer.

A css-only solution (provided you would want the left/right split to remain shrinked if not hovered).

It simply targets the :hover on each element to adjust and grow, else remain shrinked.

Alternatively see below for using javascript to achieve effect.

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

A javascript/jquery solution:

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>

score 0 · Answer 2 · answered May 06 '19 at 07:33

CSS can only select downwards or to the right inside the DOM, not upwards or to the left.

You can make this work however in a situation like this, if the container element does not contain anything but those two children, and no white space around the children anywhere. Then you can make use of the fact that hovering an element always means hovering its parent at the same time.

So you can set the width for .containerSplit:hover .leftSide to make the left section shrink, whenever the whole container is hovered - that includes hovering over the right side. And since we don’t want it to shrink when the left side itself gets hovered, we modify the selector in that part to become .containerSplit:hover .split.leftSide:hover, so that the left still grows when it itself gets hovered.

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

How to affect a sibling element during a hover state?

2 Answers2