使用jQuery实现鼠标悬停添加CSS样式失效问题排查

嘿，我一眼就瞅出问题在哪儿啦！你的代码有两个关键问题导致hover功能没效果：

• 脚本顺序搞反了：你把jQuery的业务代码写在了引入jQuery库的前面，浏览器是从上到下解析代码的，这时候执行$('#b').hover(...)的时候，$这个jQuery核心函数还没被定义呢，自然没法运行。
• 没等DOM加载完成就执行代码：就算库的顺序对了，如果DOM元素还没渲染出来，jQuery也找不到#a和#b这两个div，绑定事件的操作等于白做。

给你修正后的完整代码，两种写法都能解决问题：

写法一：用$(document).ready()等待DOM加载 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// 确保DOM完全加载后再执行代码
$(document).ready(function() {
  $('#b').hover(
    // 鼠标悬停时的回调
    function() { 
      $('#a').css({ 'background': '#ccc' }); 
    }, 
    // 鼠标移开时的回调
    function() { 
      $('#a').css({ 'background': 'initial' }); 
    }
  );
});
</script>
<div id="a">Div A</div>
<div id="b">Div B</div>

写法二：把脚本放在body末尾 #

这种写法利用浏览器的解析顺序，当执行脚本时，前面的DOM元素已经加载完成了：

<div id="a">Div A</div>
<div id="b">Div B</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#b').hover(
  function() { 
    $('#a').css({ 'background': '#ccc' }); 
  }, 
  function() { 
    $('#a').css({ 'background': 'initial' }); 
  }
);
</script>
</body>

这样修改后，当你把鼠标悬停在Div B上时，Div A的背景就会变成灰色，移开鼠标后就会恢复初始状态啦！

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