マウスイベント CSS:hover と JS:mouseover の違いの詳細な図による説明

職場でページをより魅力的にするために、フロントエンド開発者は、マウスの出入りの効果をページに追加することがよくあります。マウスの移動と移動を設定するには、通常 2 つの方法があります。1 つは単に CSS で hover 擬似クラスを使用する方法で、もう 1 つは JS で DOM イベント (onmouseover と onmouseout) を使用する方法です。次に、この記事では CSS 疑似クラスの hover と JS マウス イベントの Mouseover の違いについて説明します。お役に立てれば幸いです。

JS は HTML イベントに反応できます。マウスは JavaScript に属しており、要素がイベントにバインドされている場合、イベントが発生すると JavaScript コードを実行できます。

JavaScript のマウス イベントには次のものが含まれます。
onmouseover と onmouseout: マウスが出入りするとイベントがトリガーされます。
onmousedown と onmouseup: マウス ボタンが押されるか離されるとイベントがトリガーされます。
onclick と ondbclick: マウスのクリックまたはダブルクリック時にイベントがトリガーされます
onmousemover: マウスが移動するとイベントがトリガーされます

CSS: hover は css の疑似クラス セレクターです は、マウスを内外に移動するプロセスを指します。この操作により要素のスタイルが変更され、対応するサブクラスも変更されます。ただし、要素の内容は変更できません。たとえば、ポップアップ ウィンドウの効果を実現するためにマウスが通過する場合、onmousemove を使用して実装されます。hover を使用すると、そのような効果は実現できません。

テキストの説明ではわかりにくいかもしれません。次に、ホバー、マウスオーバー、マウスアウトの違いを例を挙げて説明します。画像と組み合わせると一目瞭然です。

CSS:hover メソッドで得られる効果を見てみましょう

HTML 部分:

<div class="container">
     <div class="aa">内容1</div>
     <div class="bb">内容2</div>
</div>

CSS 部分:

.container {
           width: 200px;
           border: 1px solid #000000;
           margin: 200px auto;
           line-height: 100px;
           text-align: center;
          }
.aa,.bb {
          height: 100px;
          margin: 1px;
          background: #ccc;
         }
.aa:hover{background: pink;}

効果画像:

大きなボックスには 2 つの小さな div が含まれています。マウスが上の div の上を通過すると背景色がピンクに変わります。左の図はマウスが入っていないときの効果、右の図はマウスが通過したときの効果です。画像からわかるように、CSS:hover は実際にこの効果を実現できます。

次に、onmouseover と onmouseout が JavaScript でどのように実装されるかを見てみましょう。コードの CSS 部分は同じですが、イベントが HTML に追加され、JavaScript が使用される点が異なります。

HTML 部分:

<div class="container">
     <div class="aa" onmouseover="over(this)" onmouseout="out(this)">内容1</div>
     <div class="bb">内容2</div>
</div>

JavaScript 部分:

function over(obj){        
                obj.innerHTML = "鼠标移入";        
                obj.style.background = "pink";
            }
           function out(obj){
                obj.innerHTML = "移出了";
                obj.style.background = "#ccc";        
            }

レンダリング:

# 画像左がマウスインしていないときのスタイルです。上と同様に、中段がマウスを通過させたときのスタイルです。上のdivの背景色がピンクになり、内容が「マウスイン」になります。右側の図は、マウスを外に移動した後の効果です。div 内の内容が変更されています。 2 つの例を比較すると、ホバー、マウスオーバー、マウスアウトの違いがわかるはずです。

概要: CSS は要素のスタイルのみを変更できますが、要素のコンテンツを変更する場合は、JavaScript マウス イベントの onmouseover および onmouseout を使用する必要があります。したがって、スタイル効果のみを目的として、CSS 疑似クラスの hover を使用します。動的に変更する必要がある場合は、js イベントを選択します。仕事の具体的な内容は状況に応じて適切な方法を選択してください。このチュートリアルがお役に立てば幸いです。

以上がマウスイベント CSS:hover と JS:mouseover の違いの詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。