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

Question

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

..当用户鼠标悬停/移出时..

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

查询：

<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 和 out 函数回调}

$(".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;
  }

Answer 3

您的选择器缺少 a.并且尽管您说要更改border-color- 您正在添加和删除一个设置background-color

Answer 4

您缺少选择器上的点，您可以在 jquery 上使用 toggleClass 方法：

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