CSS で「visibility: hidden」の要素でホバー効果が機能しないのはなぜですか?

CSS で可視性が機能しない: その理由と修正方法を説明します

CSS スタイルでは、あいまいさが予期しない結果を招くことがあります。 「可視性」プロパティを使用してテキストを非表示にしようとするときに直面する一般的な問題を見てみましょう。

問題:

CSS は次のようになります:

.spoiler {
    visibility: hidden;
}

.spoiler:hover {
    visibility: visible;
}

この設定によれば、「.spoiler」クラスを含むテキストの上にマウスを置くと、それが表示されるはずです。ただし、これは発生せず、マウスの位置に関係なくテキストが非表示になります。

理由:

問題は、非表示要素のデフォルトの動作にあります。 「可視性: 非表示」の要素は、ホバーを含むマウス イベント中にユーザー エージェントによって認識されません。したがって、ホバー状態はアクティブ化されません。

解決策 1: 要素をネストする

この課題を克服するには、スポイラー テキストを別の要素内にネストできます。

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span>

このソリューションは、最初は非表示の可視性を持つネストされたspan要素が機能するため機能します。マウスイベントをブロックします。ただし、'.spoiler' 親要素が hover イベントを受け取ると、アクティブ化され、span 要素が表示され、テキストが表示されます。

解決策 2 (Chrome のみ): アウトライン トリック

Chrome の別のアプローチは、「.spoiler」要素にアウトラインを追加することです。

.spoiler {
    outline: 1px solid transparent;
}

この手法は、マウス イベントに応答する非表示のヒットボックスを作成し、ホバー効果が適切に機能できるようにします。隠し要素について。

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