Using a div within a wrapper to change another div with hover - html

Question

I'm trying to hover over a div and change another when they are within a flex wrapper.
I want to hover over the <li> elements to expand other divs in the wrapper.
Specifically the li links in the navbar that respectively goes to the inner divs.
code pen example :
https://codepen.io/popados/pen/JjpyvqO
EDIT: The code pen shows an example that works if you hover the wrapper but not the div I want to (the home button).
Ideally, I would like to expand the about author box to 1024 x 768 while hovering one of the li element divs.
EDIT 2: Added a comment down below. Images added. Shows what the expected output should be. Changed HTML to remove around a li element.
a {
text-decoration: none;
color: green;
}
header {
background-color: black;
border-bottom: 1px solid red;
}
.wrapper {
display: flex;
width: 1024px;
height: 768px;
}
a:visited {
color: green;
}
ul {
list-style: none;
flex-direction: column;
}
li {
border: 2px solid red;
list-style: none;
padding: 25px;
}
.nav-bar {
background-color: black;
color: red;
position: relative;
height: 100%;
width: 200px;
}
.nav-bar-text {
height: 125px;
text-align: center;
font-size: 32px;
vertical-align: middle;
border-right: 2px solid red;
}
.home {
transition: all 2s ease-out;
}
.home:hover {
background-color: rgb(71, 71, 71);
}
.wrapper:hover .about {
background-color: rgb(71, 71, 71);
}
li:hover {}
.cn-button {
width: 150px;
}
.banner {
background-color: rgb(30, 0, 255);
width: 0px;
height: 0px;
color: white;
text-align: left;
transition: all 2s ease-in;
}
.about {
background-color: orange;
width: 200px;
height: 200px;
color: white;
text-align: left;
transition: all 2s ease-in;
}
<div class="wrapper">
<div class="nav-bar">
<div class="sidebar">
<div class="nav-bar-text">
<p>Navbar Text And Logo</p>
</div>
<ul>
<li class="home">Home</li>
<li>About Author</li>
<li>Other Books</li>
<li>Quotes</li>
<li><a href=https://github.com/popados> [ Popados Github ] </a></li>
<li><button class="cn-button" id="cn-button">+</button></li>
</ul>
</div>
</div>
<div class="banner">
<h2>Book Title and Banner</h2>
</div>
<div class="about">
<h2>About Author</h2>
</div>
<div class="other-books">
<h2>Other Books</h2>
</div>
</div>

Answer 1

there. this is a simple code that able to solve your issue. you may implement this code to yours by editing here and there. hope it help to solve your problem.
* {
box-sizing: border-box;
}
.zoom {
float: left;
padding: 50px;
background-color: green;
transition: transform .3s;
width: 400px;
height: 100px;
margin: 0 auto;
border: 2px solid red;
}
.zoom1 {
float: left;
padding: 50px;
background-color: blue;
transition: transform .4s;
width: 400px;
height: 100px;
margin: 0 auto;
border: 2px solid red;
}
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
.zoom1:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom">
<h2> Menu</h2>
</div>
<div class="zoom1">
<h2> About Us</h2>
</div>
<div class="zoom">
<h2> Contact</h2>
</div>
<div class="zoom1">
<h2> Profile</h2>
</div>