更改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懸停區

回答

相關問題