Как добавить/удалить класс в mouseOver/mouseOut — JQuery .hover?

Хотите изменить цвет границы на коробке..

..когда пользователь наводит/убирает курсор мыши..

Вот попытка кода. Требуется работа!

JQuery:

<script>
$("result").hover(
  function () {
    $(this).addClass("result_hover");
  },
  function () {
    $(this).removeClass("result_hover");
  }
);
</script>

CSS3:

<style>
  .result {
    height: 72px;
    width: 100%;
    border: 1px solid #000;
  }
  .result_hover {
    border: 1px solid #fff;
  }
</style>

HTML5:

<div class="result">
  <div class="item">
    <div id="item1">
      <i class="icon"></i>&nbsp;##
    </div>
  </div>
<div>

Спасибо за поиск


jquery hover jquery-hover addclass removeclass
person sourcingsynergy    schedule 29.05.2013    source источник

Ответы (4)


arrow_upward
66
arrow_downward

Вы забыли dot селектора класса результирующего класса.

Текущая демонстрация

$(".result").hover(
  function () {
    $(this).addClass("result_hover");
  },
  function () {
    $(this).removeClass("result_hover");
  }
);

Вы можете использовать toggleClass на событие наведения

Текущая демонстрация

 $(".result").hover(function () {
    $(this).toggleClass("result_hover");
 });
person Adil    schedule 29.05.2013

arrow_upward
12
arrow_downward

Вы можете просто использовать: {обратный вызов функции входа и выхода}

$(".result").hover(function () {
    $(this).toggleClass("result_hover");
 });

Для вашего примера лучше использовать псевдокласс CSS :hover: {js/jquery не требуется}

.result {
    height: 72px;
    width: 100%;
    border: 1px solid #000;
  }
  .result:hover {
    background-color: #000;
  }
person A. Wolff    schedule 29.05.2013

arrow_upward
2
arrow_downward

В вашем селекторе отсутствует ., и хотя вы говорите, что хотите изменить border-color, вы добавляете и удаляете класс, который устанавливает background-color

person Klors    schedule 29.05.2013

arrow_upward
1
arrow_downward

Вам не хватает точки в селекторе, и вы можете использовать метод toggleClass для jquery:

$(".result").hover(
  function () {
    $(this).toggleClass("result_hover")      
  }
);
person isJustMe    schedule 29.05.2013