スポイラーテキストがホバーに表示されないのはなぜですか?

スポイラー要素の CSS 可視性の問題のトラブルシューティング

CSS の可視性プロパティを使用してスポイラー要素を作成する場合、一部のユーザーは、テキストの上にマウスを移動しても、テキストは表示されません。この問題は、ホバリングには対話する可視要素が必要であるという事実が原因である可能性があります。

この問題を解決するには、スポイラー要素を別のコンテナ内にネストすることが効果的な解決策の 1 つです。これにより、スポイラー要素が最初に非表示になっている場合でも、コンテナーはホバー イベントを受け取ることができます。次の更新されたコード スニペットは、この手法を示しています。

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span>

Thisこのアプローチにより、ホバーしたときにコンテナ要素が確実に表示され、内側のスポイラーの可視化がトリガーされます。 element.

デモ:
http://jsfiddle.net/DBXuv/

注: 特に Chrome ブラウザの場合は、次のとおりです。追加により機能を強化できます:

.spoiler {
    outline: 1px solid transparent;
}

この追加により、最初のテキストが非表示になっている場合でも、スポイラーが存在します。

更新されたデモ:
http://jsfiddle.net/DBXuv/148/

以上がスポイラーテキストがホバーに表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。