jquery - 更改 CSS Div 悬停区域

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;
}​

效果很好，接受一件小事...当您的鼠标离开“rolloverad”的 div 区域时，较大的 div 返回到 display:none。我希望这样，当您将鼠标悬停在 rolloverad div 上并出现 rolloveradexpanded div 时，rolloverexpanded div 保持可见，直到您的鼠标离开 rolloverexpanded div 区域，而不是较小的 rollover 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/