css - 悬停和定位

Question

当悬停在 id 圆圈时，我的导航会显示，但一旦我离开悬停，导航就不会保持静止。

我的想法是它不会停留，因为我在彼此之间创建了空间，所以不再有“链接”。如果是这种情况，有解决办法还是死路一条？

这是我的代码。

    <div class="container">
<div id="menu">
<div id="circle"><a href="#"></a>
<nav>
    <ul>
      <li><a href="#"><span id="portfolio"><h2></h2></span></a></li>
      <li><a href="#"><span id="blog"><h2></h2></span></a></li>
    </ul>
 </nav>
</div>
</div>
</div>

    .container {
width: 960px;
margin: 0 auto;
position:relative;}

#invi {
width: 200px;
height: 200px;
-moz-border-radius: 120px;
-webkit-border-radius: 120px;
border-radius: 120px;
border: 5px solid black;
position: absolute;
top: 100px;
left: 45%;
}

#circle {
width: 100px;
height: 100px;
-moz-border-radius: 120px;
-webkit-border-radius: 120px;
border-radius: 120px;
border: 5px solid black;
margin: 40px auto;}

nav {
display:none;
margin:0 auto;
opacity:1;
transition-property: opacity;
transition-duration: 20s}

#circle:hover nav{
display:block;
opacity:0.1;}

li{
display:inline-block;
width:1px;}

#portfolio{
float:left;
width: 30px;
height: 30px;
background: white;
-moz-border-radius: 120px;
-webkit-border-radius: 120px;
border-radius: 120px;
border:solid black 5px;
margin-left:90px;
transition-property: width,height;
transition-duration:3s;}

li:hover #portfolio{
width:50px;
height:50px}

#blog{
float:left;
width: 30px;
height: 30px;
background: white;
-moz-border-radius: 120px;
-webkit-border-radius: 120px;
border-radius: 120px;
border:solid black 5px;
margin-left:-150px;
transition-property: width,height;
transition-duration:3s;}

li:hover #blog{
width:50px;
height:50px}

提前致谢

Answer 1

我认为最好的选择是使用 jQuery。

这是为您完成所有逻辑的样式。

#circle:hover nav{
   display:block;
   opacity:0.1;
}

那么你的 JS 将是:

$(document).ready(function(){
   $('#circle').mouseover(function(){
      $('#circle nav').css('display', 'block');
      $('#circle nav').css('opacity', '0.1');
   });

   //This function is called only if you LEAVE your nav
   $('#circle nav').mouseleave(function(){
      $('#circle nav').hide();
   });
});

Fiddle