2 つの div が重なって events_html/css_WEB-ITnose がトリガーされると、ちらつきの問題が発生します

今日問題が発生したので、関数を実装したいと思いました:

マウスを div1 上に移動すると、div2 が表示されます。出現時は div2 が div1 の上にあり、出現後に div2 が点滅します。

そこで、問題の原因を探し始めたところ、div1 をトリガーすると div2 が表示されるが、div2 は div1 の上に存在するため、div2 が表示されると、その下の div1 のイベントが再度トリガーされることが原因であることがわかりました。通常、与えられるイベントはmouseoverとmouseoutです。2つのdivが重なってdiv2が表示されるため、div1のイベントが複数回トリガーされるため、ちらつきの問題が発生します。

解決策:

1. 最初はmouseenterとmouseleaveを変更しましたが、問題は依然として同じであることがわかりました。

注:

mouseover() と Mouseout() は、マウスが出入りするときにトリガーされることを意味し、子要素を通過するときにもトリガーされます

mouseenter() と Mouseleave() はそれを意味します子要素を通過するとトリガーされません

2. 次に、バブリングを防ぐために e.stopPropagation(); を追加しましたが、そこにあります。まだ無症状です。

注:

e.stopPropagation(); //バブリングが停止すると、上向きのバブリングはなくなります。

e.preventDefault(); //デフォルトの動作を防止します

3. 最後に、トグルイベントへの切り替えは機能しません。

4. 結局のところ、この問題を js を使用して解決したい場合、基本的に js を使用するとちらつきの問題が発生する可能性があります。ではCSSを使えば解決できるのでしょうか？インターネットで多くの情報を確認したところ、多くの人がこの問題に遭遇し、CSS のホバーを使用して解決していることがわかりました。

具体的な使用法:

2 つの div の親要素、つまり 2 つの div を囲むボックスにホバーを与えます。親要素がホバーすると、div2 のスタイルが表示されるように設定されます。問題は正常に解決され、ちらつきの問題は発生しなくなります。

以下のコード:

html部分:

<div class="fudiv">        <span class="div1"><img src="/static/imghwm/default1.png"  data-src="img/jixinjia-partner1.jpg"  class="lazy" alt=""/></span>        <div class="div2">                 <div class="box6"><img src="/static/imghwm/default1.png"  data-src="img/qr-code-bg1%20(1).jpg"  class="lazy" alt="p"/></div>                 <p>扫码有奖</p>        </div></div>

css部分:

.fudiv:hover .div2 {         display: block;}.div2{          display: none;}

このメソッドではちらつきの問題が発生します

うーん