0

我有这个纯 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 替代品.. 那太棒了！:)

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 回答