Css 在不使用jquery的情况下悬停后保持div打开

我实际上使用了css函数：hover来显示我的div，而不是jquery。问题是，当光标离开div时，div就会消失。 我还避免使用

display:block函数，因为我无法利用css的不透明度转换功能。我看到其他帖子使用所有构建的jquery代码来解决这个问题。我想知道是否可以在不重写jquery中的整个代码的情况下完成

这是小提琴

如您所见，将黑色div悬停在左侧时，会出现#zobbigmenu div。当光标位于#zobbigmenu div时，是否可以让它可见

感谢您的帮助
不需要Javascript/jQuery

在
#zobbigmenu
的
：悬停
上添加样式


或者，我建议将
#zobbigmenu
嵌套在
#zobmmenu
中，您可以将所有内容包装在
中：

使用孩子而不是兄弟姐妹，您可以使用Javascript而不使用jQuery。
#zobmenu:hover ~ #zobbigmenu, #zobbigmenu:hover {
    margin-left: 20px;
    cursor:alias;
    opacity:0.8;
    margin-right: auto;
    z-index:10;
}

<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>

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