jQuery列表项悬停切换图片失效问题求助

你的问题出在选取.honda元素的方式上：$(".honda").attr("data-cover")只会获取页面中第一个匹配.honda类的元素的data-cover值，所以不管你悬停哪个列表项，拿到的始终是Image A的地址，自然图片不会切换。

解决思路 #

把列表项的位置（索引）和对应的.honda元素一一对应：

• 悬停第1个列表项时，取第1个.honda的data-cover
• 悬停第2个列表项时，取第2个.honda的data-cover，以此类推

修正后的代码 #

jQuery代码 #

$(".list li a").mouseenter(function(){
  // 获取当前悬停列表项在父级ul中的索引（从0开始）
  var itemIndex = $(this).parent().index();
  // 根据索引选取对应的.honda元素，获取其data-cover值
  var currentImage = $(".honda").eq(itemIndex).attr("data-cover");
  // 更新图片src
  $(".img-test img").attr("src", currentImage);
});

完整可运行代码 #

<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>

<style>
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;
}
</style>

<script>
$(".list li a").mouseenter(function(){
  var itemIndex = $(this).parent().index();
  var currentImage = $(".honda").eq(itemIndex).attr("data-cover");
  $(".img-test img").attr("src", currentImage);
});
</script>

额外优化建议 #

你可以把图片地址直接存在列表项的data属性里，不用额外的.honda容器，代码更简洁：

<ul class="list">
  <li><a href="#" data-img="https://dummyimage.com/200x100/de2c2c/fff.jpg&text=A">Image A</a></li>
  <li><a href="#" data-img="https://dummyimage.com/200x100/44679e/fff.jpg&text=B">Image B</a></li>
  <li><a href="#" data-img="https://dummyimage.com/200x100/ffe554/000.jpg&text=C">Image C</a></li>
</ul>

对应的jQuery代码简化为：

$(".list li a").mouseenter(function(){
  var currentImage = $(this).attr("data-img");
  $(".img-test img").attr("src", currentImage);
});

这样就不需要额外的.images容器，逻辑更清晰。

内容的提问来源于stack exchange，提问作者3Code