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

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

原因の解明

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

可視性のジレンマの解決

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

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: E.T. phones home.

説明:

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

その他の考慮事項

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

.spoiler {
    outline: 1px solid transparent;
}

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

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