CSS でのホバーマスクの点滅の問題

今回は CSS でのホバーマスクの点滅の問題について説明します。CSS でホバーマスクを使用する際の 注意事項 は何ですか?実際のケースを見てみましょう。

具体的なコードは次のとおりです:

<p id="p2"></p>
<p id="p3">
<p>你好</p>
</p>

これはもともとマスク効果を作成したかったHTMLコード部分です。マウスがp2に移動すると、p3がp2をわずかに覆うように見えます。

最初のCSSコードです。こんな感じです

終わってから問題が見つかりました、マウスがp2に移動するとp3が点滅し続けるということです。これは私が望んでいた効果ではなかったので、多くの情報を検索し、最終的に理由を見つけました

マウスが p2 に移動すると p3 が表示されるため、マウスは p2 ではなく p3 にあることがわかりました。その後、p2 は再び消滅し、以下同様になります。

これを完全に解決するには、p2

:hover コードを次のように置き換えます。

最終的な効果は以下の通りです

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ホバーセレクター

CSSを使用して画像の背景で満たされた六角形を作成する方法

以上がCSS でのホバーマスクの点滅の問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。