javascript - マウスを要素に移動すると要素の色を変更し、要素を離れると元に戻す JS ネイティブ コードを教えてください。

Question

バブリング イベントについて学び、オンライン記事に基づいてコードを入力し、細かい変更を加えました。質問があります:

1. 最終的な目標は、マウスが上に移動したときに色を変更することですが、これを達成するにはどうすればよいでしょうか?
2. 次の li 要素をクリックすると、前にクリックした要素の色が復元される問題を解決するにはどうすればよいでしょうか?
あなたのアイデアと使用する方法を教えてください。残りは自分で書きます。コードを入力する能力を鍛えたいです。ありがとう!
追記: 本を読むのは簡単ですが、自分でコードを書くのはわかりにくいです。

HTML コードは次のとおりです:

リーリー

JSコード:

リーリー

Answer 1

1. CSS で解決できるのであれば、JS は必要ありません。この問題は hover 疑似クラスで解決できます。
2ですが、コードはクリックイベントです。ちょっと間違っています。まあ、イベントプロキシを書いたので、下位のものを書いて、liが少ない場合はliを直接操作します

リーリー

クロージャって知っていますか？グローバル変数を汚さずにクロージャを使用するために、最初に記述する方法は、すべての li の色を直接クリアし、現在クリックされている li に色を追加することです。

2番目の書き方では、内部に直接書きました。要素の取得とクロージャのコードを再度外部に書きません。 リーリー

2 番目の方法は、前の方法をクリアして現在の li に色を追加することです。比較すると、2 番目の方法のパフォーマンスはわずかに優れており、最初の方法は理解しやすいです。

追記: ただし、それでもイベント プロキシの書き込み方法をお勧めします。

Answer 2

1. CSSを使わないのはなぜですか~

2. mouseenterイベントとmouseoutイベントを使用できます

Answer 3

マウスを上に移動したときに色を変更するには、主にcssを使用する必要があり、疑似class:hoverで実行できます。
クリックすると、2 つのアイデアが表示されます。 1. ul の下のすべての li の色を復元し、e.target を赤に変更します。
2. クリックして前のターゲットを保存し、クリックして前のターゲットの色を復元すると、現在のターゲットが赤になります

Answer 4

マウスを上に移動すると、ホバーイベントを使用して検索できます。

Answer 5

1. xx まで上がって yy まで下がった人は、まず CSS の hover 疑似クラスの使用を検討してください。

デフォルトの属性をクラス名で保存し、変更された属性を別のクラス名で保存します。クリック コールバック中に、
2. デフォルト クラスを削除して変更クラスを追加し、その兄弟要素を走査して変更クラスを見つけます。 、それを見つけたら、変更クラスを削除してデフォルトクラスを追加すると、問題ないはずです~

   $(this)

Answer 6

リーリー リーリー

Answer 7

ホバー(関数(){

) リーリー

},関数(){

リーリー

})