jQuery hover()函数失效求助：Codepen悬停切换背景色失败

嘿，我来帮你排查下这个hover交互失效的问题～结合你提到的场景，我整理了几个常见的原因和对应的解决方案：

1. 先确认jQuery是否正确引入 #

在Codepen里很容易忽略这一步：

• 打开Codepen的Settings面板，切换到JavaScript标签
• 在Add External Scripts/Pens里选择合适的jQuery版本（比如3.x系列），确保它被加载到你的项目中

如果没引入jQuery，所有jQuery语法都会失效，这是最常见的坑！

2. 检查选择器与元素的动态性 #

如果你的小div（.g1）是动态生成的（比如通过JS添加到页面），直接用$(".g1").hover()是绑定不上事件的，因为绑定代码执行时元素还不存在。这时候需要用事件委托：

// 用事件委托监听mouseenter和mouseleave事件
$(document).on('mouseenter', '.g1', function() {
  // 获取当前小div的背景色
  const targetColor = $(this).css('background-color');
  // 给.wrapper设置背景（注意用background而非background-color，因为原背景是渐变）
  $('.wrapper').css('background', targetColor);
}).on('mouseleave', '.g1', function() {
  // 鼠标离开时恢复原来的渐变背景
  $('.wrapper').css('background', 'linear-gradient(to right, #你的原始渐变颜色1, #你的原始渐变颜色2)');
});

如果是静态元素，直接用hover也可以，但要确保选择器拼写完全正确（比如类名有没有写错大小写、少打字符）。

3. 处理渐变背景的覆盖问题 #

你提到.wrapper的背景是linear-gradient，这属于background-image属性，而background-color会被它覆盖。所以直接设置background-color是看不到效果的，应该用background属性来覆盖整个背景样式：

错误写法：$(".wrapper").css("background-color", "yellow");
正确写法：$(".wrapper").css("background", "yellow");

如果小div的背景也是渐变，那可以直接获取它的background-image属性应用到.wrapper上：

const targetGradient = $(this).css('background-image');
$('.wrapper').css('background-image', targetGradient);

4. 排查元素遮挡问题 #

如果以上都没问题，检查小div是不是被其他元素（比如透明的遮罩、父元素的overflow）挡住了？可以用浏览器开发者工具的Elements面板，选中.g1元素，看它的可点击区域是否正常，或者手动触发mouseenter事件，看控制台有没有报错。

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