web-dev-qa-db-ja.com

CSSの可視性が機能しないのはなぜですか？

CSSに「ネタバレ」クラスを追加して、ネタバレに使用しました。テキストは通常​​は非表示ですが、マウスをテキストの上に置くと、スポイラーが読みたい人に表示されます。

.spoiler{
    visibility:hidden;

}
.spoiler:hover {
    visibility:visible;
}

単純なはずですが、何らかの理由でこれは機能しません。マウスをポイントしても、テキストは非表示のままです。何がこれを引き起こしているのでしょうか？

cssvisibility
30
Yves

非表示の要素の上にカーソルを置くことはできません。 1つの解決策は、要素を別のコンテナ内にネストすることです。

CSS：

.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/

43
Ates Goral

テキストだけでなく

.spoiler {
    opacity:0;
}
.spoiler:hover {
    opacity:1;
    -webkit-transition: opacity .25s ease-in-out .0s;
    transition: opacity .25s ease-in-out .0s;
}
19
Jon Ander

テキストが非表示の場合、実際にはスペースを占有しないため、ホバーイベントをトリガーすることは事実上不可能です。

たとえば、フォントの色を変更するなど、別の方法を試す必要があります。

.spoiler{
    color:white;

}
.spoiler:hover {
    color:black;
}
2
leonbloy

:hover疑似クラスは、CSS仕様によるaタグ専用です。ユーザーエージェントは、非アンカータグに対して:hoverをサポートする必要はありません 仕様によると 。

CSSを使用してスポイラーテキストを表示するには、スポイラーコンテンツの周囲に<a>タグを配置する必要があります。もちろん、これはマウスがポインターに変わることを意味しますが、cursor: none;を追加することでこれを抑制できます。

1
Yzmir Ramirez

それがうまくいかない場合

.spoiler span {
    visibility: hidden;
    line-height:20px;
}

.spoiler:hover span {
    visibility: visible;
    line-height:20px;
}
1
Chetan bane