jQueryイベントのmouseover、mouseout、hoverの違い

少し前、ランドセルを上にスライドさせたときに、淘宝網と QQ スペースの上部に表示されるドロップダウン メニューの効果を真似したいと思いました。IE6 では、マウスオーバーイベントがトリガーされることがわかりました。マウスが div 内で移動するとき、私は疑問に思っていましたが、実際には API に説明がありましたが、同じ問題を抱えている友人がいると思います。この記事を読んだ後、私はいつも
jquery にはマウスオーバーとマウスアウトが 2 つあると思っていました イベントはホバーイベントと同じです。両者に違いはなく、同じである必要があります。しかし昨日、アニメーションの効果によって、この 2 つは同等ではないことに気づきました。

<div class="wrapper">

< div class="img"></div>

< div class="text"></div>

< /div>

< div class="point"></div>

ラッパーにイベントを追加し、ラッパーにマウスを移動するとclass="point"のレイヤーが拡大されます。ただし、mouseover イベントと Mouseout イベントを使用すると、マウスがラッパー レイヤーに移動すると、ポイント レイヤーが大きくなります

しかし、マウスが img レイヤーと text レイヤーの間を移動すると、ポイント レイヤーは常に大きくなり、小さくなっていきます。 。これは私たちが望んでいる結果ではありません。img であれ text であれ、マウスがラッパー レイヤー上にある限り、ポイントは大きくなりますが、マウスがラッパー レイヤーの外に出ていないときは、ポイントレイヤーは小さくなりません。

マウスオーバーとマウスアウトの代わりにホバーを使用することで、徐々にアイデアが明確になってきました。

このような単純な問題を解決するのに長い時間がかかったというのは本当に大げさです。記念に日記を書きます。

追記: その後、私のマスターは、実際にはjqueryのソースコードに次の段落があると言いました:

hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

つまり、ホバー! = マウスオーバー + マウスアウト。ただし、hover = マウスエンター + マウス離れる。

以上がjQueryイベントのmouseover、mouseout、hoverの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。