更改 CSS Div 悬停区域答案

【问题标题】：Changing CSS Div Hover Area更改 CSS Div 悬停区域
【发布时间】：2012-12-15 11:52:48
【问题描述】：

我有一个纯 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 区域，而不是较小的 rollover ad div。一旦你查看了 jsfiddle，它就会变得更有意义： http://jsfiddle.net/JuruE/

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

如果有人对如何用 CSS 解决这个问题有任何建议或答案，或者甚至是 jquery 替代品.. 那太棒了！ :)

【问题讨论】：

标签： jquery css html hover

【解决方案1】：

你可以添加另一个选择器来做这件事：

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

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

【讨论】：

哇，这太容易了！我会在 11 分钟内接受您的答复，谢谢您的帮助！ :)

【解决方案2】：

将此 linr 添加到您的 css 中。那会起作用的。

.rolloveradexpanded:hover{
    display:block;
}

【讨论】：