0

cssのみを使用して、マウスオーバーでdiv要素を非表示にしたい。

<div>Stuff shown on hover</div>

div {
    display: block;
    width:100px;
    height:100px;
    border: solid black;
}

div:hover {
    display: none;
}

なぜそれがうまくいかないのですか？

たとえば、代わりに背景を変更したい場合は、問題なく機能します。

div:hover {
    background-color: red;
}

ホバーセレクターを適用している同じ要素を非表示/表示することはできませんか?

http://jsfiddle.net/link01/TknA8/

4

2 に答える 2

5

なぜそれがうまくいかないのですか？

当たり前じゃないですか…？

Div 要素が表示されます。

マウスをその上に移動すると、その:hover状態になります。

その:hover状態について、要素はレンダリングされた出力から完全に削除されると言います。

「もうそこにない」ため、マウスはまだその上に置くことができません。

マウスがその上にないということは、要素がもう:hover状態にないことを意味します。

:hover要素がその状態にない場合、CSS は要素に対して何を言いますか?

ああ、そうだdisplay:block。

OK、ブラウザは要素を再度レンダリングします。

ねえ、何だよ、そのおかしなネズミがその上にいるの？

見てみましょう、それは再び削除する必要があることを意味します...

于 2013-03-17T04:36:25.713 に答える
2

要素の表示が none に設定されている場合、その要素はレイアウトに存在しないため、マウスで操作できません。

その周りにラッパーを追加するだけです：

<div class="wrapper">
    <div class="hidden">Stuff shown on hover</div>
</div>

http://jsfiddle.net/cecAn/

于 2013-03-17T04:37:25.833 に答える