マウスオーバー イベントによってトリガーされ、マウス アウト時に初期状態に戻るアニメーションを JavaScript で作成しようとしています。ユーザーがページ上の画像にカーソルを合わせると、最初の高さが 0px の別の div が徐々に高さを上げ、画像の下部で 50px になります。
私が直面している問題は、カーソルを画像から画像の下部をカバーするdivに移動すると、マウスアウトがトリガーされ(画像とは別の要素であるため)、新しいマウスオーバーイベントがトリガーされることですカーソルが画像上にないことを検出すると div が消えるため、すばやく連続します (つまり、div が何度も何度もすばやく表示されては消えます)。
カーソルが画像から div の上を走ったときに div が消えないように、このようなループをどのように壊すのか疑問に思っています (つまり、マウスが新しく作成された要素ではない他の要素に移動しない限り、onmouseout イベントがトリガーされないようにします)。 div)。
問題をよりよく説明するための画像を次に示します。
