Problem when trying to make the image change when hovering over items in a list. Jquery

Question

When trying to select another item from the list the image does not change. I checked with console.log and it seems the selector doesn't change when I hover over the other items in my list, so Image A is always 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 looking for the selector to change when the mouse passes over a list element and for the image to change. Tried various things but no significant changes.

I also add an image of the problem.

On the left is my current result. All 3 elements are stacked in the same place. On the right is shown how it should work.

Answer 1

Option 1: If you don't mind tweaking your markup, you can try something like this:

var $displayImage = $('.img-test img');

$(".list li a").on('mouseenter', function() {
  var currentImage = $(this).attr("data-cover");
  $displayImage.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="#" data-cover="https://dummyimage.com/200x100/de2c2c/fff.jpg&text=A">Image A</a></li>
  <li><a href="#" data-cover="https://dummyimage.com/200x100/44679e/fff.jpg&text=B">Image B</a></li>
  <li><a href="#" data-cover="https://dummyimage.com/200x100/ffe554/000.jpg&text=C">Image C</a></li>
</ul>

Option 2: If you want to maintain the current markup, you can try something like this:

var $displayImage = $('.img-test img');

$(".list li a").on('mouseenter', function() {
  var index = $(this).parent().index();
  var currentImage = $(".honda").eq(index).attr("data-cover");

  $displayImage.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>

Optional: You can preload the images for better performance.