jQuery中鼠标悬停（mouseover）功能失效问题咨询

我来帮你梳理下代码里导致悬停高亮功能失效的问题，都是些容易修正的语法和配置小错误：

1. HTML 脚本引用的错误 #

你的HTML头部有三处明显问题：

• script标签拼写错误：把<script>写成了<scrips>
• jQuery文件的引号未闭合：src="jquery.js> 应该补全为 src="jquery.js"
• 脚本文件引用错误：第二个script标签的src指向了index.html，这显然不对，应该改成index.js

修正后的HTML头部代码：

<head>
  <script src="jquery.js"></script>
  <script src="index.js"></script>
</head>

2. JavaScript 语法错误 #

你的JS代码里存在未闭合的选择器引号：

• $(".button) 缺少了闭合的双引号，正确写法是 $(".button")

另外，当前代码只处理了鼠标进入的高亮逻辑，没有做鼠标离开时恢复原样式的处理，体验会很奇怪，我一起帮你补上：

修正后的index.js代码：

$(".button").mouseenter(function(){
  $(".button").css("background-color", "cyan");
  $(".button").css("color", "white");
});

// 鼠标离开时恢复元素默认样式
$(".button").mouseleave(function(){
  $(".button").css("background-color", "");
  $(".button").css("color", "");
});

额外优化建议：用CSS实现更高效的悬停效果 #

其实这种简单的悬停高亮，用CSS的:hover伪类实现会更高效，不需要依赖JavaScript，代码也更简洁：

.button:hover {
  background-color: cyan;
  color: white;
}

把这段CSS放到HTML头部的<style>标签里，或者外部CSS文件中，就能直接实现相同的悬停效果，还能避免JS可能带来的加载顺序等问题。

内容的提问来源于stack exchange，提问作者redpanda 101real