更改CSS Div悬停区

我有这个纯粹的CSS悬停，当你翻转一个div时显示一个div。这里是CSS：更改CSS Div悬停区

.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区域，而不是更小的翻转广告div。这使得很多更有意义，一旦你查看的jsfiddle：当你将鼠标悬停在灰色框，上面写着“悬停”出现在一个大黑框 http://jsfiddle.net/JuruE/

望着的jsfiddle ..。现在，一旦你的鼠标离开小灰盒区域，大黑盒消失..我想这样做，所以黑盒子div不会消失，直到你的鼠标离开较大的盒子区域，而不是较小的盒子区域。

如果任何人有任何建议或解决如何解决这个问题的CSS，或者甚至可能是一个jQuery的替代..这将是如此真棒太棒了！ :)

来源

2012-12-31 Dyck

您可以添加另一个选择器，做到了这一点：

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

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

来源

2012-12-31 09:06:47 Blender

哇，那太容易了！我会在11分钟内接受你的回答，谢谢你的帮助！ :) – Dyck

这是我所捡到的最大“诀窍”之一。 –

这LINR添加到你的CSS。那可行。

.rolloveradexpanded:hover{ 
    display:block; 
}

来源

2012-12-31 09:15:57

更改CSS Div悬停区

回答

相关问题