如何:在mouseOver/mouseOut上添加/删除类 - JQuery .hover？

Question

想要改变盒子上的边框颜色..

..当用户将鼠标移出/移出时..

这是尝试过的代码..需要工作!

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>

谢谢你的期待

Answer 1

你忘了了结果类dot的类选择器.

现场演示

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

您可以在悬停事件中使用toggleClass

现场演示

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

Answer 2

你可以使用:{in and 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;
  }