如何在jQuery中实现鼠标悬停与离开时的样式切换效果

嘿，我来帮你搞定这段代码的问题～先看看你原代码里踩的几个坑：

• 语法小错误：$(body') 少了左引号，得写成 $('body') 才对
• 事件选得不对：mousemove 是鼠标移动就触发，太频繁了，完全没必要，我们要的是鼠标进入/离开元素时触发一次的事件
• 方法用错了：mouseover、mouseleave（你写的leave是错的）是用来绑定事件的，不是直接传样式参数，设置样式得用 .css() 方法
• 父元素获取错了：得用 .parent() 方法，不是 .parent 属性
• 没保存原背景色：离开时没法恢复到原来的颜色，白忙活啦

下面给你两种好用的实现方式，都能满足你的两个需求：

方式一：用 jQuery 的 hover() 方法（推荐，写法更简洁） #

hover() 可以直接绑定鼠标进入和离开的回调，一步到位：

$(document).ready(function() {
  // 这里用$('*')是给所有元素绑定，你可以改成特定选择器，比如'.target-item'，只给需要的元素加效果
  $('*').hover(
    // 鼠标进来时做的事
    function() {
      // 把当前元素原来的背景色存起来，存在元素的自定义数据里
      $(this).data('original-bg', $(this).css('background-color'));
      // 给当前元素设蓝色背景
      $(this).css('background-color', 'blue');
      
      // 处理父元素
      const $parent = $(this).parent();
      $parent.data('original-bg', $parent.css('background-color'));
      $parent.css('background-color', 'yellow');
    },
    // 鼠标离开时做的事
    function() {
      // 恢复当前元素原来的背景色
      $(this).css('background-color', $(this).data('original-bg'));
      
      // 恢复父元素原来的背景色
      const $parent = $(this).parent();
      $parent.css('background-color', $parent.data('original-bg'));
    }
  );
});

方式二：分开绑定 mouseenter 和 mouseleave 事件 #

如果需要更灵活的控制，比如给两个事件加不同的额外逻辑，可以分开绑定：

$(document).ready(function() {
  $('*').on('mouseenter', function() {
    // 保存原背景色
    $(this).data('original-bg', $(this).css('background-color'));
    $(this).css('background-color', 'blue');
    
    const $parent = $(this).parent();
    $parent.data('original-bg', $parent.css('background-color'));
    $parent.css('background-color', 'yellow');
  }).on('mouseleave', function() {
    // 恢复原背景色
    $(this).css('background-color', $(this).data('original-bg'));
    
    const $parent = $(this).parent();
    $parent.css('background-color', $parent.data('original-bg'));
  });
});

小提醒： #

• 上面用了 $('*') 选择所有元素，如果你只需要给特定元素加效果，记得改成对应的选择器（比如 $('.card')），避免不必要的性能消耗
• 如果元素原本没设置背景色，$(this).css('background-color') 会返回透明值，恢复时也会正确回到透明状态
• 要是不想父元素的事件影响子元素，可以在回调里加 event.stopPropagation()，不过根据你的需求，应该不需要这个～

内容的提问来源于stack exchange，提问作者이재웅