'CSS Hover works for one element but not for other

I try to make a left-right split screen style page. For that i use a div for with a title for the left and one for the right part. My aim is to make them bigger when hovering with the mouse and at same time make the other smaller. This works great for hovering over the left side of the screen but when hovering over the right part the left part isn't getting smaller. I did exactly the same for both sides, maybe there is a problem with the specificity or the order of the elements

(I simplified the code, that's why there's VH and VW in a strange way)

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#Left {
  height: 100vh;
  width: 50vw;
  background: black;
  color: rgb(127, 127, 127);
  text-align: right;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  transition-property: width, color;
  transition-duration: 500ms;
}

#Right {
  background: white;
  height: 100vh;
  width: 50vw;
  color: rgb(127, 127, 127);
  text-align: left;
  position: fixed;
  top: 0;
  right: 0;
  transition-property: width, color;
  transition-duration: 500ms;
}

h1 {
  padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 5vh;
  padding-bottom: 5vh;
  font-size: min(12vw, 15vh, 20em);
}


/* 
Hover Effects 
*/

#Right:hover {
  width: calc(50vw + 31vh);
  color: black;
}

#Right:hover #Left {
  width: calc(50vw - 31vh);
}

#Left:hover {
  width: calc(50vw + 31vh);
  color: white;
}

#Left:hover~#Right {
  width: calc(50vw - 31vh);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aloïs Jolliet</title>
  <link rel="stylesheet" href="./main.css">
</head>

<body>
  <div id="Left">
    <h1>Left</h1>
  </div>
  <div id="Right">
    <h1>Right</h1>

  </div>
</body>

</html>
htmlcsshover


Solution 1:[1]

https://codepen.io/nkoroloff/pen/ZEvQoqw?editors=1111

I've shared a solution, hope it helps. Without additional scripts you can't change size element before...

jQuery script

$(function() {
  $('#Right').mouseenter(function() {
    $('#Left').addClass("hover-right");
  }).mouseleave(function () {
    $('#Left').removeClass("hover-right");
  });
});

and simple CSS

#Left.hover-right {
 width: calc(50vw - 31vw);
}

Solution 2:[2]

In additional to Nicks answer my solution in plain Javascript. Without jquer.

const right = document.getElementById('Right');
const left = document.getElementById('Left');

right.addEventListener('mouseenter', e => {
  left.classList.add('hover-right');
});

right.addEventListener('mouseleave', e => {
  left.classList.remove('hover-right');
});
* {
 margin: 0;
 padding: 0;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#Left {
 height: 100vh;
 width: 50vw;
 background: black;
 color: rgb(127, 127, 127);
 text-align: right;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 0;
 transition-property: width, color;
 transition-duration: 500ms;
}
#Right {
 background: white;
 height: 100vh;
 width: 50vw;
 color: rgb(127, 127, 127);
 text-align: left;
 position: fixed;
 top: 0;
 right: 0;
 transition-property: width, color;
 transition-duration: 500ms;
}
h1 {
 padding-left: 5vw;
 padding-right: 5vw;
 padding-top: 5vh;
 padding-bottom: 5vh;
 font-size: min(12vw, 15vh, 20em);
}

/* 
Hover Effects 
*/
#Right:hover {
 width: calc(50vw + 31vw);
 color: black;
}
#Left.hover-right {
 width: calc(50vw - 31vw);
}

#Left:hover {
 width: calc(50vw + 31vw);
 color: white;
}
#Left:hover ~ #Right {
 width: calc(50vw - 31vw);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aloïs Jolliet</title>
  <link rel="stylesheet" href="./main.css">
</head>

<body>
  <div id="Left">
    <h1>Left</h1>
  </div>
  <div id="Right">
    <h1>Right</h1>

  </div>
</body>

</html>

Solution 3:[3]

This can be done without JavaScript - if you make use of the fact, that hovering an element also always means you are hovering its parent at the same time.

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#Left {
  height: 100vh;
  width: 50vw;
  background: black;
  color: rgb(127, 127, 127);
  text-align: right;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  transition-property: width, color;
  transition-duration: 500ms;
}

#Right {
  background: white;
  height: 100vh;
  width: 50vw;
  color: rgb(127, 127, 127);
  text-align: left;
  position: fixed;
  top: 0;
  right: 0;
  transition-property: width, color;
  transition-duration: 500ms;
}

h1 {
  padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 5vh;
  padding-bottom: 5vh;
  font-size: min(12vw, 15vh, 20em);
}


/* 
Hover Effects 
*/

#Parent:hover #Right:hover {
  width: calc(50vw + 31vh);
  color: black;
}

#Parent:hover #Left {
  width: calc(50vw - 31vh);
}

#Parent:hover #Left:hover {
  width: calc(50vw + 31vh);
  color: white;
}

#Parent:hover #Right {
  width: calc(50vw - 31vh);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aloïs Jolliet</title>
  <link rel="stylesheet" href="./main.css">
</head>

<body>
  <div id="Parent">
    <div id="Left">
      <h1>Left</h1>
    </div>
    <div id="Right">
      <h1>Right</h1>
    </div>
  </div>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Heretic Monkey
Solution 2 Maik Lowrey
Solution 3 CBroe

Related Questions