Как добавить/удалить класс на 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>

Спасибо, что посмотрели

Ответы

Ответ 1

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

Live Demo

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

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

Live Demo

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

Ответ 2

Вы могли бы просто использовать: {in и out function callback}

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

В вашем примере лучше использовать CSS-псевдокласс :hover: {no js/jquery needed}

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

Ответ 3

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

Ответ 4

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

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