web-dev-qa-db-ja.com

方法：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>

見てくれてありがとう

jqueryhoveraddclassremoveclassjquery-hover
24
sourcingsynergy

結果クラスの クラスセレクター のdotを忘れました。

ライブデモ

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

toggleClass on hover eventを使用できます

ライブデモ

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

次のように使用できます：{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;
  }
11
A. Wolff

セレクタに.がありませんが、border-colorを変更したいと言っても-background-colorを設定するクラスを追加および削除しています

2
Klors

セレクターのドットが欠落しているため、jqueryでtoggleClassメソッドを使用できます。

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