keep div open after hover without jquery

I actually use css function :hover to make my div appear and no jquery. The problem is that the div disappear when the cursor goes out of the div. I’m also avoiding using display:block; function because i cannot take advantage of the opacity transition features of css. I saw other posts solving the question using all built jquery code. I wondered if it could be done without rewriting the entire code in jquery.

Here is the fiddle http://jsfiddle.net/dandecasa/k22UG/1/

As you see, when hovering the black div on the left, the #zobbigmenu div appears. Could it be possible to let it be visible when the cursor is in the #zobbigmenu div?

Thank you for you help


solution

Javascript/jQuery is not necessary.

Add the styling on :hover of #zobbigmenu too.

jsFiddle example

#zobmenu:hover ~ #zobbigmenu, #zobbigmenu:hover {
  margin-left: 20px;
  cursor:alias;
  opacity:0.8;
  margin-right: auto;
  z-index:10;
}

Alternatively, I would suggest nesting #zobbigmenu in #zobmenu.