47

CSS では、マウスを要素の上に置くと、:hover 疑似クラスを使用してビューを指定できます。

.element_class_name:hover {
    /* stuff here */
}

jquery を使用して、この疑似クラスを追加または「オン」にするにはどうすればよいですか? 通常、jQuery でクラスを追加する場合は、次のようにします。

$(this).addClass("class_name");

「ホバー」を試しましたが、これは文字通り「ホバー」という名前のクラスを要素に追加します。

何を書けばいいのか分かる人いたら教えてください！ありがとう！

4

4 に答える 4

55

jQuery を使用して特定の疑似クラスを強制的に適用することはできません。疑似クラス (特に動的疑似クラス) は、DOM ( spec )では表現できない情報に基づいて選択するように設計されているため、このようには機能しません。

使用する別のクラスを指定してから、代わりに jQuery を使用してそのクラスを追加する必要があります。このようなもの：

.element_class_name:hover, .element_class_name.jqhover {
    /* stuff here */
}

$(this).addClass("jqhover");

または、スタイルシートにハードコーディングせずに、ルールを探し.element_class_name:hoverて jQuery 自体を使用してそのクラスを追加することもできます。とはいえ、同じ原理です。

于 2012-10-05T06:50:10.280 に答える
8

jQueryやjavascriptでそれを行う方法はないと思います。

これらの2つの質問で同じ答えを見つけることができます：

  1. 設定-css-pseudo-class-rules-from-javascript
  2. css-pseudo-classes-with-jquery
于 2012-10-05T06:54:40.557 に答える
0

ページに div を作成する

<div id="Style">
  <style>
    .element_class_name:hover {
      /* stuff here */
    }
  </style>
</div>

そして、プログラムでスタイルをハードコードします。つまり、

$("#Style").find("style").prepend("#" + this.id + ":hover, ");

残念ながら、これを呼び出す要素には ID が必要です。 

$("body").children().click(function(){
  $("#Style").find("style").prepend("#" + this.id + ":hover, ");
});
/* demo */
* {
  transition: opacity 1s;
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
  <body>
    <div id="Style">
      <style>
        .element_class_name:hover {
          opacity: 0 !important;
        }
      </style>
    </div>

    <button id="btn1">Add hover class here</button>
    <button id="btn2">Add hover class here too</button>
    <p id="Note">
      To use this though, you'll have to assign an id to that particular element though.
    </p>
  </body>
</html>

于 2016-07-14T14:15:50.093 に答える