jQuery_jquery でのホバー、マウスオーバー、マウスアウトの違いの分析

この記事では、jQuery のホバー、マウスオーバー、マウスアウトの違いを例とともに分析します。参考のために皆さんと共有してください。詳細は次のとおりです:

jquery では、mouseover イベントと Mouseout イベントは実際には hover イベントと同じであると考えていました。両者に違いはなく、同じである必要があります。しかし昨日、アニメーション効果によって、この 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=mouseenter+mouseleave です。

この記事が jQuery プログラミングのすべての人に役立つことを願っています。