☰

CSS の可視性が機能しないのはなぜですか? 質問する

tag-icon • tag-icon css visibility
CSS の可視性が機能しないのはなぜですか? 質問する

ネタバレ用に CSS に「spoiler」クラスを追加しました。テキストは通常​​は表示されませんが、マウスをその上に移動すると表示され、読みたい人にネタバレが表示されます。

.spoiler{
    visibility:hidden;

}
.spoiler:hover {
    visibility:visible;
}

簡単なはずですが、何らかの理由でうまくいきません。マウスをテキストの上に置いてもテキストは見えません。原因は何だと思いますか?

ベストアンサー1

非表示の要素にマウスを合わせることはできません。 1 つの解決策は、要素を別のコンテナー内にネストすることです。

CS: ...

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

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

デモ：

http://jsfiddle.net/DBXuv/

アップデート

Chrome では、以下を追加できます。

.spoiler {
    outline: 1px solid transparent;
}

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

おすすめ記事