Keep div open after hover without jquery

Question

I actually use the css function: hover over my div and not jquery. The problem is that the div disappears when the cursor exits the div. I also avoid using a function display:block;because I cannot take advantage of the css transparency functions. I saw other posts that solve the issue using all of the built jquery code. I was wondering if this can be done without rewriting all the code in jquery.

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

As you can see, when you turn the black div to the left, the #zobbigmenu div appears. Is it possible to see this when the cursor is in the div #zobbigmenu?

Thanks for helping

Answer 1

Javascript / jQuery is not required.

Add style :hoverto #zobbigmenu.

JsFiddle example

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

As an alternative, I suggest nested #zobbigmenuin #zobmenu.

Answer 2

You can wrap everything inside <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