如何使用jQuery恢复div的默认图片背景？

问题根源 #

你当前的mouseleave代码存在两个核心问题：

1. 错误使用removeAttr：removeAttr("src")的作用是完全移除src属性，而不是将其值重置为默认。执行后<img>标签失去图片地址，自然显示为空，而非恢复预设的默认图。
2. 事件绑定范围错误：将mouseleave绑定在单个<li>上，会导致鼠标在列表项之间切换时频繁触发恢复操作，体验混乱，且无法精准判断是否完全离开整个列表区域。

修复方案 #

1. 提前保存默认图片地址：页面加载时就获取并存储默认图的src，避免重复查找或硬编码。
2. 调整事件绑定对象：将mouseleave绑定到整个.list容器，只有当鼠标完全离开列表区域时，才恢复默认图。
3. 用attr重置src：通过attr("src", 默认地址)将图片地址设回初始值，而非移除属性。

修改后的完整JS代码 #

// 页面加载时保存默认图片地址
const defaultImgSrc = $('.img-test img').attr('src');

// 鼠标进入列表项时切换对应图片
$(".list li").mouseenter(function() {
  // 用data()获取data属性更规范
  const currentImage = $(this).data("cover");
  $(".img-test img").attr("src", currentImage);
});

// 鼠标离开整个列表时恢复默认图片
$(".list").mouseleave(function() {
  $(".img-test img").attr("src", defaultImgSrc);
});

额外优化点 #

• 替换attr("data-cover")为data("cover")：jQuery的data()方法专门用于处理data-*属性，兼容性和可读性更好。
• 简化选择器：直接使用.img-test img代替parent().parent().find("img")，避免DOM层级变化导致选择器失效。

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