0

div をロールオーバーしたときに div を表示するこの純粋な CSS ホバーがあります。CSSは次のとおりです。

.rolloverad {
height:42px;
width:235px;
position: absolute;
top: 0px;
left: 404px;
background:#ccc;
}

.rolloveradexpanded {
display: none;
position:absolute;
width:500px;
height:250px;
z-index:30;
background:#000;
color:#fff;
}

.rolloverad:hover + .rolloveradexpanded {
display: block;
}​

これはうまく機能し、1つの小さなことを受け入れます...マウスが「ロールオーバー」のdiv領域を離れると、より大きなdivがに戻りdisplay:noneます。rolloverad div にカーソルを合わせると、rolloveradexpanded div が表示され、マウスが rolloverexpanded div 領域を離れるまで、rolloverexpanded div が表示されたままになり、小さい rollover ad div ではありません。jsfiddle を表示すると、もっと理にかなっています: http://jsfiddle.net/JuruE/

jsfiddle を見ると、「ホバー」と表示されている灰色のボックスにカーソルを合わせると、大きな黒いボックスが表示されます。ここで、マウスが小さな灰色のボックス領域を離れると、大きなブラック ボックスが消えます。マウスが小さなボックス領域ではなく大きなボックス領域を離れるまで、ブラック ボックスの div が消えないようにしたいと思います。

この問題を CSS で解決する方法、またはおそらく jquery の代替案でさえも、誰かが提案や回答を持っている場合..それはとても素晴らしいでしょう! :)

4

2 に答える 2

4

まさにそれを行う別のセレクターを追加できます。

.rolloverad:hover + .rolloveradexpanded, .rolloveradexpanded:hover {
    display: block;
}​

デモ: http://jsfiddle.net/JuruE/1/

于 2012-12-31T09:06:47.660 に答える
0

この linr を css に追加します。それはうまくいきます。

.rolloveradexpanded:hover{
    display:block;
}
于 2012-12-31T09:15:57.887 に答える