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

【问题标题】：How to: Add/Remove Class on mouseOver/mouseOut - JQuery .hover?如何：在 mouseOver/mouseOut - JQuery .hover 上添加/删除类？
【发布时间】：2013-05-25 03:59:44
【问题描述】：

希望更改框的边框颜色..

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

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

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 addclass removeclass jquery-hover

【解决方案1】：

您忘记了结果类的class selector 的dot。

Live Demo

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

您可以在hover 事件中使用toggleClass

Live Demo

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

【讨论】：

【解决方案2】：

你可以使用：{in and out function callback}

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

【讨论】：

【解决方案3】：

您的选择器缺少 .，尽管您说要更改 border-color - 您正在添加和删除设置 background-color 的类

【讨论】：

【解决方案4】：

你错过了选择器上的点，你可以在 jquery 上使用 toggleClass 方法：

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

【讨论】：