链接hover随机变色功能首次加载失效，刷新后正常，求排查原因

你的JavaScript代码存在两处语法错误，这直接导致页面首次加载时脚本执行失败，hover事件根本没绑定上：

• $ (this) 里的空格是无效写法，jQuery选择器的$和括号之间不能有空格，必须写成$(this)
• 鼠标离开的回调函数中，$(this).css("color","" 缺少闭合括号和分号，正确写法是$(this).css("color", "");

语法错误会让浏览器JS引擎中断执行，所以首次加载时完全没效果；偶尔刷新后看似正常，大概率是浏览器缓存的异常状态，本质问题还是代码写错了。

修正后的完整代码如下：

JavaScript #

$(document).ready(function() {
  $("a").hover(function() {
    $(this).css("color", getRandomColor());
  }, function() {
    $(this).css("color", "");
  });

  function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
})

CSS #

a {
  color: red;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2><a href="https://www.google.com/">TEST</a></h2>

额外提示：如果之后需要给动态添加的链接也加这个效果，建议用事件委托写法，比如：

$(document).on('mouseenter', 'a', function() {
  $(this).css("color", getRandomColor());
}).on('mouseleave', 'a', function() {
  $(this).css("color", "");
});

这样新添加的链接也能触发悬停变色效果。

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