imgのホバーイベントが点滅する

今日、フローティングマウスの詳細の効果を示すためにクラスメートにアルバム写真を書きました。点滅するバグに遭遇し、正常に解決したので、それを書き留めてみんなに共有しました。

jqueryのmouseover、mouseout、その他のイベントを使用する場合も、「label: hover + label」の形式を使用します。原理は同じです。

分析: 画像には を使用し、マウスがフローティングしたときに表示されるテキストと背景を div+span を使用して記述します。次のコード: (点滅します)

htmlコード:

CSSコード:

マウスが img 上にあるとすぐに div が表示されますが、マウスはまだその領域内にあるように見えますが、マウスのフローティングのプロセスを考えてください。画像では、マウスホバー要素が表示されている div に変更されているため、この時点では、div は引き続き表示: none; に戻り、サイクルが点滅し続けます。
したがって、スタイルを追加する必要があります。つまり、マウスを div にフロートさせ、さらに div の表示スタイルをブロックに変更する必要があります。バグが発生する場所にコードを直接追加できます (「,div: hover」を追加)。コードは次のとおりです:

これで写真のフローティング効果が完璧になります~

間違いがある場合は、修正してください。