使用JavaScript和jQuery修改Div样式时鼠标悬停效果失效问题排查

先看你提供的代码：

<head> 
  <style> 
    .grayableDiv{background-color:transparent} 
  </style> 
</head> 
<script> 
  function DoGrayEffectIn() { 
    $('.grayableDiv').css('background-color', 'Gray'); 
  } 
  function DoGrayEffectOut() { 
    $('.grayableDiv').css('background-color', 'Transparent'); 
  } 
</script> 
<div class="grayableDiv" onmouseover ="DoGrayEffectIn" onmouseout="DoGrayEffectOut">

先解决效果失效的问题 #

你的代码里有两个关键问题导致悬停没反应：

• 内联事件缺少函数调用括号：你写的onmouseover ="DoGrayEffectIn"只是告诉浏览器事件关联的函数名称，但没有触发函数执行。正确写法是加上括号，让浏览器在事件触发时调用函数：

  <div class="grayableDiv" onmouseover="DoGrayEffectIn()" onmouseout="DoGrayEffectOut()">
  

• 可能未引入jQuery库：你使用了$('.grayableDiv')这种jQuery语法，但如果页面没有提前加载jQuery库，浏览器会报错$ is not defined，导致函数无法运行。记得在你的自定义脚本之前引入jQuery库文件（比如本地的jquery.js）。

关于jQuery与原生JS混合使用的问题 #

完全可以混合使用！jQuery本身就是基于原生JavaScript开发的工具库，两者没有冲突。你既可以用原生JS写函数、绑定事件，在里面调用jQuery的便捷方法；也可以用jQuery做DOM操作，搭配原生JS的逻辑代码，无缝配合毫无问题。

额外优化建议 #

其实这个悬停变灰的效果，用CSS就能实现，根本不需要写JS，代码更简洁还更高效：

.grayableDiv {
  background-color: transparent;
  transition: background-color 0.2s; /* 可选：添加过渡动画，让颜色切换更丝滑 */
}
.grayableDiv:hover {
  background-color: gray;
}

把这段CSS替换你原来的样式，再删掉JS和内联事件，一样能实现悬停变灰的效果，还省去了JS的性能开销~

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