非表示の要素の上にマウスを移動できないのはなぜですか: CSS の可視性の難題?

隠し要素のトラブルシューティング: CSS 可視性のジレンマ

ネタバレを隠す能力を追求する中で、次の機能を利用して「ネタバレ」クラスを実装しました。 CSS 可視性プロパティ。しかし、その努力は予期せぬハードルに遭遇しました。ホバリング時にスポイラーが非表示のままになるということです。問題を詳しく調べて解決策を見つけてみましょう。

ホバリング非表示に関する課題

CSS の可視性プロパティは、意図したとおり、要素を非表示にします。ただし、重要な注意点が生じます。要素が非表示になると、ホバー イベントを含む入力を一切受信できない状態になります。これはジレンマを引き起こします。非表示の要素の上にカーソルを置くと、まさにスポイラーが表示されるトリガーとなるからです。

創造的な解決策: 入れ子になった要素

この障壁を克服するには、賢いネスト技術を採用します。ネストされた 内にネタバレテキストを配置することで、

更新された CSS および HTML 構造

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

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

デモと Chrome 固有の改善

ここでライブ デモをチェックしてください: http://jsfiddle.net/DBXuv/。カーソルを合わせるとスポイラー テキストが表示されるようになりました。

Chrome ユーザーの場合、追加の CSS ルールによりアクセシビリティを強化できます。

.spoiler {
    outline: 1px solid transparent;
}

このアウトラインは、非表示の要素の微妙な視覚的表示を追加します。

Chrome の改善により更新されたデモ: http://jsfiddle.net/DBXuv/148/.

以上が非表示の要素の上にマウスを移動できないのはなぜですか: CSS の可視性の難題?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。