keep div open after hover without jquery

Question

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

Answer 1

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.

Answer 2

You could wrap everything inside a <div>:

<div id="wrap">
   <div id="zobmenu"></div>
   <div id="zobbigmenu">
      <a href="http://instagram.com/dandecasa" target="_blank">
        <img src="http://theyellowhopeproject.com/iconmonstr-instagram-4-icon.png" height="50px"></img>
      </a>
   </div>
</div>

And change the CSS:

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

jsFiddle