CSS `visibility: hidden` がホバー効果で失敗するのはなぜですか?

謎の解明: ホバーで CSS の可視性が失敗する理由

CSS の可視性は要素の可視性を操作する便利な方法を提供しますが、時々つまずくことがあります。予期せぬ障害。最初はテキストを非表示にし、マウスを置くと表示されるように「スポイラー」クラスを定義したシナリオを考えてみましょう。あなたの期待に反して、テキストは頑固に非表示状態を維持し、ホバーの努力を無視します。

原因を探る

この不可解な動作の背後にある犯人は、性質にあります隠し要素のこと。 Visibility:hidden を使用して要素を非表示にすると、事実上非表示になり、ページ レイアウト内のスペースを消費しません。これは、その上にホバリングしようとすることは、本質的に、虚空と対話しようとしているようなものであることを意味します。この要素は単にホバリング アクションを登録していないだけです。

可視性のジレンマを解決する

このハードルを克服するには、要素に表示されたままにする方法を提供する必要があります。内容が隠されている場合でも。 1 つのアプローチは、ホバー イベントを受信できる別のコンテナー内に要素をネストすることです。これを実現する方法は次のとおりです:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span class="spoiler"><span>E.T. phones home.</span></span>

説明:

隠し要素をネストすることにより、スパン要素内のテキストを使用すると、外側のスポイラー要素が表示されたままになり、ホバー イベントをキャプチャできるようになります。ホバーが発生すると、内側の Span 要素が表示され、スポイラー テキストが表示されます。

追加の考慮事項

Chrome などの特定のブラウザでは、次のようなわずかな問題が発生する可能性があります。非表示のスポイラー要素は、マウスでわずかに選択可能です。これに対処するには、スポイラー要素にアウトラインを追加します。

.spoiler {
    outline: 1px solid transparent;
}

この透明なアウトラインにより、テキスト全体の可視性を妨げることなく、ホバー イベントを受け取るのに十分なサイズがスポイラー要素に確保されます。

これらの調整により、スポイラー クラスは完璧に機能し、隠しテキストの非表示を維持し、シームレスなホバリング エクスペリエンスを提供します。

以上がCSS `visibility: hidden` がホバー効果で失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。