CSS Hover works for one element but not for other

user_18497608 0
Viewed 153

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>

hover css html
3 Answers

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);
}
user_134654850

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>

user_148071110

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>

user_14278780
Related