Whenever I attempt to choose a different item from the list, the image does not update. Upon inspecting with console.log, it appears that the selector remains static even when hovering over other items on the list, resulting in Image A always being displayed.
$(".list li a").mouseenter(function(){
var currentImage = $(".honda").attr("data-cover");
// console.log(currentImage)
$(".honda").parent().prev().prev().find("img").attr("src", currentImage);
});body {
background-color: rgb(51, 51, 51);
}
.img-test {
background-color: rgb(0, 230, 12);
height: 100px;
width: 200px;
position: relative;
margin-left: 300px;
margin-top: 50px;
}
.list li {
list-style: none;
color: rgb(238, 238, 238);
font-size: 25px;
margin-top: 15px;
padding: 10px;
max-width: 500px;
background-color: rgb(76, 102, 117);
border: 1px solid rgb(155, 161, 180);
cursor: pointer;
}
.list>li>a {
color: rgb(238, 238, 238);
text-decoration: none;
display: block;
padding: 10px;
list-style: none;
font-size: 25px;
}
.list li a:hover {
background-color: rgba(194, 79, 188, 0.664);
color: #ffcb6b;
transition: all .4s ease;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-test"><img src="https://dummyimage.com/200x100/bfbfbf/000.jpg&text=Default+BG"></div>
<ul class="list">
<li><a href="#">Image A</a></li>
<li><a href="#">Image B</a></li>
<li><a href="#">Image C</a></li>
</ul>
<div class="images">
<div class="honda" data-cover="https://dummyimage.com/200x100/de2c2c/fff.jpg&text=A"></div>
<div class="honda" data-cover="https://dummyimage.com/200x100/44679e/fff.jpg&text=B"></div>
<div class="honda" data-cover="https://dummyimage.com/200x100/ffe554/000.jpg&text=C"></div>
</div>I am trying to find a way for the selector to dynamically change as the mouse moves over an element in the list and for the corresponding image to update accordingly. Despite experimenting with various approaches, no significant progress has been made.
An image illustrating the issue has also been included.
The current outcome shows all three elements overlapping in the same location (shown on the left), whereas the expected behavior is depicted on the right.https://i.sstatic.net/QkW3R.png