.hover() 在 jQuery 中不起作用

Question

我尝试创建一个 jQuery 函数 .hover 来更改 div 的背景颜色，方法是使用另一个 class 并使用 hover 来添加类和删除类。

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');
    }
  );

});

Answer 1

使用css:hover伪class代替JS

div {
  display: inline;
  font-family: Helvetica;
  color: white;
  background-color: #FF6666;
  padding: 20px;
}
div:hover {
  color: black;
  background-color: #66FF33;
}

<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>

Answer 2

您还没有包含 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>

$(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>

不过，如果您只想更改背景颜色，CSS 会是更好的选择。

Answer 3

它对我有用..

$(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;


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>

Answer 4

它对我有用，请确认您的脚本引用正确。我可以建议打开您的检查元素并检查控制台并查看您可能遇到的任何错误。如果没有任何显示，请使用浏览器调试器。

我在 link 上使用了以下在线 jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

.hover() 在 jQuery 中不起作用

.hover() not working in jQuery

html

javascript

css

jquery

hover