I'm currently working on designing a menu for a website project. I have a beautiful graphic set up for the menu button in the top left corner, which functions perfectly when hovering over the bars themselves. However, I've encountered an issue with the transition not running smoothly when the mouse is hovering over the menu as opposed to the bars. Can anyone provide insights into why this might be happening?
Here's the CSS code:
.bars:hover .line-top { transform: translateY(9px) rotateZ(45deg); }
.bars:hover .line-middle { transform: rotateZ(135deg); }
.bars:hover .line-bottom { transform: translateY(-9px) rotateZ(135deg); }
.menu-holder:hover ~ .bars .line-top { transform: translateY(9px) rotateZ(45deg); }
.menu-holder:hover ~ .bars .line-middle { transform: rotateZ(135deg); }
.menu-holder:hover ~ .bars .line-bottom { transform: translateY(-9px) rotateZ(135deg); }
.menu-holder {
width: 200px;
position: absolute;
top: 0;
left: -150px;
height: 100vh;
background: red;
transition: transform 1s;
}
.bars:hover ~ .menu-holder{
transform: translateX(150px);
}
.menu-holder:hover {
transform: translateX(150px);
}
.line-top, .line-middle, .line-bottom {
width: 30px;
height: 8px;
border-radius: 28px;
background: black;
margin: 1px;
transition: transform 1s;
}
.bars {
width: 30px;
z-index: 2;
position: absolute;
}
And here's the HTML markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="bars">
<div class="line-top"></div>
<div class="line-middle"></div>
<div class="line-bottom"></div>
</div>
<div class="menu-holder slider">
</div>
<!-- <script src="script.js"></script> -->
</body>
</html>
P.S. I'm new to CSS and open to any suggestions or advice.