Мне нужна помощь по добавлению изображения при наведении на вертикальное меню.
Мне нравится, чтобы изображение показывалось, и когда мыши над изображением меняются на другое изображение, и текст показывается на правой стороне изображения.
Я пытаюсь создать функциональность, но она продолжает искажать меню. :(
Пожалуйста, оцените любую помощь.
<style>
.mySidenav a {
position: absolute;
left: -80px;
transition: 0.3s;
padding: 15px;
width: 100px;
text-decoration: none;
font-size: 20px;
color: black;
}
.body{
background-color: gray;
}
.mySidenav a:hover {
left: 0;
}
.about {
top: 10px;
background-color: #fff;
}
.blog {
top: 65px;
background-color: #fff;
}
.myContent {
margin-left:150px;
}
.myButtonLink {
display: block;
width: 100px;
height: 100px;
background: url('https://kyleschaeffer.com/wp-content/uploads/2009/01/buttonleafhover.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}
</style>
<body class="body">
<div class="mySidenav sidenav">
<a href="#" class="about">About</a>
<a href="#" class="blog">Blog</a>
</div>
<div class="myContent">
<p>This is the image that should be in the menu</p>
<a class="myButtonLink" href="#LinkURL">Leaf</a>
</div>
</body>