jquery - ホバー効果のためのjQuery memoize css

Question

要素のホバー効果を作成したいのですが、再びホバーアウトしたときに、要素のホバー前の CSS を以前と同じにしたいです。そのため、要素から再びホバリングするときに、以前のスタイルを誤ってオーバーライドしたくありません。つまり、要素の css 状態をメモし、後でその状態を復元する簡単な方法です。

アイデア？

score 2 · Accepted Answer

要素に特定のクラスを適用して、ホバーCSSをトリガーします。

次に、ホバーが完了したら、ホバークラスを削除します。

これにより、CSSがスタイルのオーバーライドと復元を処理できるようになります。

score 2 · Accepted Answer

新しいcssクラスを作成するだけです。ホバリング時、使用addClass(_thatclass_)時、ホバリング時の使用removeClass(_thatclass_)

score 2 · Accepted Answer

を使用して、純粋なCSSでそれを行うことができます:hoverか? 可能であれば、自動的にホバリングしていないときに古い CSS を復元します。

この例を参照してください。すべてdivの s には、ホバリングすると大きくなる境界線があり、ホバリングを停止すると通常に戻ります。ここに CSS を配置するので、この回答は自己完結型です。

div {
   border: 2px solid red;
}

div:hover {
  border-width: 10px;
}

(最後だけでなく、セレクター内の任意の場所で hover を使用できることに注意してください。例#myID:hover .childClass)

3 に答える 3