Question

我有这个纯粹的CSS悬停，当你翻转一个div时会显示一个div。这是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;
}

这很好用，只接受一件小事......当你的鼠标离开div区域进行“rolloverad”时，较大的div会回到display:none。我希望如此，当你将鼠标悬停在rolloverad div上，并且rolloveradexpanded div出现时，rolloverexpanded div保持可见，直到你的鼠标离开rolloverexpanded div区域，而不是较小的翻转ad div。一旦你查看jsfiddle，它会更有意义： http://jsfiddle.net/JuruE/

看着jsfiddle ..当你将鼠标悬停在显示“悬停”的灰色框上时，会出现一个大黑框。现在，一旦你的鼠标离开灰色的小盒子区域，大黑盒就消失了。我想这样做，所以黑盒div不会消失，直到你的鼠标离开更大的盒子区域，而不是更小的盒子区域。

如果有人对如何使用CSS解决这个问题有任何建议或答案，或者甚至可能是一个jquery替代方案......这将是如此可怕！：）

Answer 1

您可以添加其他选择器：

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

演示：http://jsfiddle.net/JuruE/1/

Answer 2

将此行添加到您的CSS中。这将有效。

.rolloveradexpanded:hover{
    display:block;
}

更改CSS Div悬停区域

2 个答案: