CSS マウスを DIV 上に置いた後、DIV の外側にボタンが表示される問題の詳細な説明

昨日、スタイルを書いているときに問題が発生しました。マウスを上に置いたときに p の外側のボタンが表示され、ボタンをクリックできるようにする方法。この記事では、マウスを p の上に置いた後、p の外側にボタンを表示する CSS ソリューションを紹介します。興味のある方はぜひご覧ください。昨日、スタイルを記述するときに問題が発生しました。 p 上にマウスを置くと、ボタンをクリックできるようになります。

効果は次のとおりです:

問題: ホバリング時にブロックを表示するようにボタンを設定します。これは非常に簡単なアイデアですが、ボタンの後に問題があります。ホバーリングすると が表示されます。マウスがボタンの上に移動し、p から離れて隙間を通過すると、ボタンは消えます。

解決策: 1. 大きい領域で p を選択します

この時点では、マウスはまだ p (大きい領域) にあるため、ボタンは通常どおりクリックできます。ただし、この方法の問題は、トリガー領域が拡張されることです。最初の p でトリガーすることが本来の目的である場合、この方法は機能しません。

2. 非表示のレイヤーを追加します

青いボックスに示すように、ボタンの下部にある p の下に絶対位置の領域を追加します。これにより、マウスがボタンに移動したときに p とボタンも消えません。この方法の利点は、トリガー領域が完全に適切であることです。

りー

以上がCSS マウスを DIV 上に置いた後、DIV の外側にボタンが表示される問題の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。