I'm not a pro at web design, but I'm trying to create my own website. I've divided my page into two sections - the left side for the menu bar and the right side for content. To add a 'cool' blur effect over my menu bar, I decided to overlay it with a colored image that changes opacity when hovered over.
Everything works fine as intended, except when a user clicks on a link and a new page loads. The hover effect doesn't register until the mouse is moved slightly, causing the image opacity to jump from full to 0 abruptly.
It would be ideal if the overlaying image's opacity is already set to 0 when a new page opens and the mouse remains in the left region.
#left {
text-indent: 1cm;
width: 23%;
height: 100%;
position: fixed;
background: rgba(51, 51, 51, 1);
}
#right {
padding-top: 2cm;
width: 77%;
height: auto;
position: absolute;
right: 0;
background: white;
}
#img {
position: absolute;
opacity: 0.6;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
color: #000;
left: 0;
}
#left:hover>#img {
opacity: 0;
}I hope I've provided enough details. Thank you in advance!
Bas