web-dev-qa-db-ja.com

jQueryを使用して要素に擬似クラスを追加するにはどうすればよいですか？

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

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

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

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

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

誰が何を書くべきか知っているなら、私に知らせてください！ありがとう！

jquerycsscss3pseudo-class
41
jay

JQueryを使用して特定の擬似クラスを強制的に適用することはできません。それは、DOM（ spec ）で表現できない情報に基づいて選択するように設計されているため、擬似クラス（特に動的擬似クラス）の動作方法ではありません。

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

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

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

または、.element_class_name:hoverルールを作成し、jQuery自体を使用して、スタイルシートにハードコーディングせずにそのクラスを追加します。ただし、これは同じ原則です。

48
BoltClock

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

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

  1. setting-css-pseudo-class-rules-from-javascript
  2. css-pseudo-classes-with-jquery
8
chanjarster

ページに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>
0
I.Am.A.Guy