如何实现鼠标悬停产品链接时切换上方对应产品图片

你写的代码逻辑有3个明显问题：

• $('.card-img-top')会选中页面全部3张卡片的顶部图，悬停任意链接时3张图会同时被替换，无法实现单卡片独立切换
• 初始化时只保存了第一张卡片的默认图地址，鼠标移出后另外两张卡片的图无法恢复到初始状态
• 第二、第三个卡片的链接上配置的data-image是不完整的相对路径，会导致对应图片加载失败

1. 替换原有JS逻辑 #

把原来的hover绑定代码换成下面的，按卡片做独立作用域处理，每个卡片单独维护自己的图片状态：

$(document).ready(function() {
  $('.card').each(function() {
    const $card = $(this);
    const $img = $card.find('.card-img-top');
    // 给每个卡片的图片单独存默认地址
    $img.data('defaultSrc', $img.attr('src'));

    // 只给当前卡片下的链接绑定事件
    $card.find('.list-group a').hover(
      function() {
        $(this).addClass('hover');
        $img.attr('src', $(this).data('image'));
      },
      function() {
        $(this).removeClass('hover');
        $img.attr('src', $img.data('defaultSrc'));
      }
    )
  })
});

2. 修正HTML里的图片路径 #

把第二、第三个卡片里所有<a>标签的data-image属性值补全为完整的图片地址，和第一个卡片的地址格式保持一致，不要用开头带/的相对路径，否则会出现404加载失败。

3. 可选体验优化 #

给图片加过渡效果，切换时更自然，在原有CSS的.card-img-top样式块里加一行属性：

.card-img-top {
  /* 保留你原来写的其他样式，追加下面这行 */
  transition: opacity 0.2s ease;
}

改完之后就能实现目标效果：鼠标悬停在对应产品分类下的链接时，只会替换当前分类卡片上方的图片，鼠标移出后自动恢复成分类默认图。

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