jQuery实现鼠标悬停切换页面背景色功能无法生效问题求助

云原生阿岚

2026-9-23

解决方法

以下是针对代码不生效的排查修复方案：

处理$符号冲突
如果页面内引入了其他使用$作为标识符的JS库，会覆盖jQuery的$对象导致代码失效，可通过以下方式隔离作用域：

// 保证内部$指向jQuery
jQuery(document).ready(function($) {
  $('#hover-01').on('mouseenter', function() {
    $('#hover-change').css('background-color', 'blue');
  });
  $('#hover-01').on('mouseleave', function() {
    $('#hover-change').css('background-color', 'red');
  });
});

适配动态渲染元素
如果导航元素是页面加载完成后由其他JS动态生成的，直接绑定事件无法匹配到元素，改用事件委托即可：

// 委托到document绑定事件，适配动态生成的元素
jQuery(document)
.on('mouseenter', '#hover-01', () => $('#hover-change').css('background-color', 'blue'))
.on('mouseleave', '#hover-01', () => $('#hover-change').css('background-color', 'red'));

解决CSS优先级问题
如果目标元素本身有带!important的背景色样式，行内样式无法覆盖的话，改用类名切换实现：
首先添加CSS规则：

.bg-hover-blue {
  background-color: blue !important;
}
.bg-hover-red {
  background-color: red !important;
}

修改JS逻辑：

jQuery(document).ready(function($) {
  $('#hover-01').hover(
    () => $('#hover-change').removeClass('bg-hover-red').addClass('bg-hover-blue'),
    () => $('#hover-change').removeClass('bg-hover-blue').addClass('bg-hover-red')
  );
});