我尝试创建一个jQuery函数.hover来通过使用另一个类并使用hover来修改div的背景颜色，方法是将hover用于addClass和removeClass。
HTML：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type='text/javascript' src='script.js'></script>
<title>Untitled 1</title>
</head>
<body>
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
</body>
</html>
CSS：
div {
display:inline;
font-family: Helvetica;
color: white;
background-color:#FF6666;
padding: 20px;
}
.hltd {
display:inline;
font-family: Helvetica;
color: black;
background-color:#66FF33;
padding: 20px;
}
JavaScript：
$(document).ready(function(){
$('div').hover(
function(){
$(this).addClass('hltd');
},
function(){
$(this).removeClass('hltd');
}
);
});
您还没有包含Jquery库。包括在脚本之前：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
null
$(document).ready(function() {
$('div').hover(
function() {
$(this).addClass('hltd');
},
function() {
$(this).removeClass('hltd');
}
);
});div {
display: inline;
font-family: Helvetica;
color: white;
background-color: #FF6666;
padding: 20px;
}
.hltd {
display: inline;
font-family: Helvetica;
color: black;
background-color: #66FF33;
padding: 20px;
}<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<title>Untitled 1</title>
</head>
<body>
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
</body>
</html>