.hover() not working in jQuery

0
votes

I tried to create a jQuery function .hover to change the background-color of div by using another class and using hover to addClass and 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');
    }
  );

});
4
javascriptjqueryhtmlcsshover

4 Answers

1
votes

You haven't included the Jquery library. Include it before your script:

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

Though, if you are only trying to change the background colour, CSS would be a better option.

1
votes

use css :hover pseudo-class instead of 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>
1
votes

Its work for me..

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

It has worked for me, confirm your script referenced correctly. I could suggest to open your inspect element and check the console and view any errors which you may encounter. If you nothing appears, use the browser debugger.

I have used the following online link for jQuery: 

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