.hover () не работает в jQuery

Я попытался создать функцию jQuery .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');
    }
  );

});

javascript html jquery css hover
person Saif Ur Rahman    schedule 11.04.2015    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Вы не включили библиотеку 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 будет лучшим вариантом.

person Jonathan    schedule 11.04.2015

arrow_upward
1
arrow_downward

используйте псевдокласс css : hover вместо 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>

person Vitorino fernandes    schedule 11.04.2015

arrow_upward
1
arrow_downward

Это работа для меня ..

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

person Mukul Kant    schedule 11.04.2015

arrow_upward
1
arrow_downward

У меня это сработало, подтвердите, что ваш скрипт указан правильно. Я мог бы предложить открыть ваш элемент проверки, проверить консоль и просмотреть любые ошибки, с которыми вы можете столкнуться. Если у вас ничего не появляется, используйте отладчик браузера.

Я использовал следующую онлайн-ссылку для jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
person Mark Cutajar    schedule 11.04.2015