Question

I have this pure CSS hover that shows a div when you rollover a div. Here is the 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;
}​

This works great, accept for one tiny thing… When your mouse leaves the div area for “rolloverad” , the bigger div goes back to display:none. I would like it so when you hover over the rolloverad div, and the rolloveradexpanded div appears, the rolloverexpanded div stays visible until your mouse leaves the rolloverexpanded div area, and not the smaller rollover ad div. It makes a lot more sense once you view the jsfiddle:
http://jsfiddle.net/JuruE/

Looking at the jsfiddle.. when you hover over the grey box that says “hover” a big black box appears. Now, once your mouse leaves the small grey box area, the big black box dissapears.. I would like to make it so the black box div wont dissapear until your mouse has left the bigger box area, and not the smaller one.

If anyone has any suggestions or answers on how to fix this problem with CSS, or maybe even a jquery alternative.. that would be soo soo so awesome! 🙂

Answer 1

You can add another selector that does just that:

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

Demo: http://jsfiddle.net/JuruE/1/