CSS の表示設定がホバーされた非表示の要素で機能しないのはなぜですか?

CSS の表示が機能しない: トラブルシューティングと解決策

CSS の「スポイラー」クラスは、マウス ホバー時に非表示のテキストを表示することを目的としています。 , しかし、何らかの理由でテキストが表示されないままになります。この問題に対処するには、このコンテキストで可視性が機能しない理由を理解する必要があります。

この問題は、非表示の要素の上にマウスを移動できないために発生します。可視性が非表示に設定されている場合、要素とそのコンテンツはマウス ホバーなどのマウス イベントに対して事実上見えなくなります。

これを解決するには、非表示の要素を別のコンテナ要素内にネストすることが 1 つの解決策です。これにより、外側のコンテナにマウスを移動できるようになり、ネストされた要素の表示変更がトリガーされます:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

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

このアプローチにより、マウスが外側のコンテナの上に置かれるまで、ネストされた要素が非表示のままになります。

さらに、Chrome では、非表示の要素にアウトラインを追加して、

.spoiler {
    outline: 1px solid transparent;
}

この更新されたコードにより、非表示要素のアウトラインにカーソルを置くと、表示を簡単に切り替えることができます。

以上がCSS の表示設定がホバーされた非表示の要素で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。