I have a SideBar.razor component, and when I hover over it, another sidebar-like overlay should open, casting a shadow over the rest of the page.

How it should look like:

How it should not look like:

CSS Code:

.overlay {    position: fixed;    left: -100%;    top: 0;    width: 100%;    height: 100%;    transition:    left 0.3s;    background: rgba(61, 74, 87, 0.50); z-index: 997;}body .overlay_hover:hover+.overlay,body .overlay:hover {    left: 0;}.overlay_hover {    position: fixed;    top: 0;    left: 0;    height: 100%;    width: 11px;    background-color: transparent;    content: "";}.sidebar {    position: fixed;    left: -100%;    top: 0;    height: 100%;    color: #3D4A57;    background-color: #FFF;    transition: left 0.3s;    z-index: 998;}body .sidebar_hover:hover+.sidebar,body .sidebar:hover {    left: 0;}.sidebar_hover {    position: fixed;    top: 0;    left: 0;    height: 100%;    width: 10px;    background-color: transparent;    content: "";}

SideBar.razor (Component)

<div class="sidebar_hover"> </div><div class="sidebar"><ul><li><a>DASHBOARD</a></li><li><a>PROJECTS</a></li><li><a>ARTIFACTS</a></li><li><a>WORKITEMS</a></li></ul></div>

MainLayout.razor (Contains SideBar.razor):

<div class=""> <main> @Body </main> </div><div class="overlay_hover"></div><div class="overlay"></div><SideBar></SideBar>

I'm trying to achieve a behavior where hovering over the main sidebar triggers the appearance of a shadow overlay, as shown in the desired behavior image. However, the current behavior doesn't match this expectation.

Any insights or suggestions on how to achieve the desired behavior would be greatly appreciated!