Question

我正在尝试使用CSS制作圆形导航动画，但问题是当鼠标悬停在其中一个菜单链接上时，所有菜单都使用我想要仅在所选链接上的效果。有办法吗？

这是我的结果的链接：http://jsfiddle.net/amromar/Fgnmw/

CSS：

#nav li {
list-style:none;
list-style-type:none;
display:table-cell;
ul.box li {  
    display: block;
    width:100px;height:100px;border-radius:1000px;font-size:20px;color:#fff;line-height:100px;text-align:center;background:#000; 

}
ul.box li{ -webkit-transition: width 0.2s ease, height 0.2s ease;  
    -moz-transition: width 0.2s ease, height 0.2s ease;  
    -o-transition: width 0.2s ease, height 0.2s ease;  
    -ms-transition: width 0.2s ease, height 0.2s ease;  
    transition: width 0.2s ease, height 0.2s ease; 
    overflow: hidden; }  

ul.box:hover li{  
display: block;
      width:200px;height:200px;border-radius:1000px;font-size:30px;color:#fff;line-height:100px;text-align:center;background:#333;
      overflow: hidden;  
}

HTML：

<ul class="box" id="nav" >
<li >home</li>
<li><a href="#">about</a></li>
<li>our tour</li>
<li>contact</li>
<li>hellow</li>
</ul>

Answer 1

我最初认为（并已发布然后已删除）您只需将:hover更改为li元素，因此此选择器ul.box:hover li为ul.box li:hover。但这只是解决方案的一部分，因为大小调整问题是display: table-cell元素上的li，这迫使它们扩展到包装器的高度。我相信我已经提出了一个可接受的解决方案来获得你想要实现的目标（仅在没有高度问题时具有与display: table-cell类似的效果）。

Here is the fiddle.

<强> CSS

#nav { 
   max-width: 500px; /* this keeps your five circles no more than 100px wide */
   margin: 20px auto; /* only needed if you are centering the nav */
   /* optional; you may want to clear the floats or give the nav a "float" to wrap
      the nav around the floated children inside. Whether you need to do this or 
      not depends on your application*/
}

#nav li {
   list-style:none;
   list-style-type:none;
   display:block;
   float: left;
}

ul.box li{  
    width:20%; /* Using the wrapper to set the width, 100px will be max without animation */
    height:100px; /* Keep the height fixed, even if narrow width "squeezes" the circle */
    border-radius:50px; /* half the max-width is all you need */
    font-size:20px;
    color:#fff;
    line-height:100px;
    text-align:center;
    background:#000;     
}

ul.box li { /* no changes here */
    -webkit-transition: width 0.2s ease, height 0.2s ease;  
    -moz-transition: width 0.2s ease, height 0.2s ease;  
    -o-transition: width 0.2s ease, height 0.2s ease;  
    -ms-transition: width 0.2s ease, height 0.2s ease;  
    transition: width 0.2s ease, height 0.2s ease; 
    overflow: hidden; 
}  

ul.box:hover li {
    /* cause the other li's to "shrink" to 
       accomodate the larger size of the one being hovered */
    width: 15%; 
}

ul.box li:hover {  
      width:40%; /* animate to twice the size for the one being hovered */
      height: 200px; /* make twice the fixed height */
      border-radius:100px;
      font-size:30px;
      color:#fff;
      line-height: 200px;
      text-align:center;
      background:#333;  
}

Answer 2

他们都显示了使用此选择器将效果应用于所有项目的效果：ul.box:hover li

相反，我给每个项目一个类，并将选择器设置为.item:hover

HTML：

<ul class="box boxr" id="nav" >
<li class="item">home</li>
<li class="item"><a href="#">about</a></li>
<li class="item">our tour</li>
<li class="item">contact</li>
<li class="item">hellow</li>
</ul>

CSS：

#nav li{list-style:none;
list-style-type:none;
display:table-cell;

}
.nav ul{margin:20px;}

ul.box li{  
display: block;
    width:100px;height:100px;border-radius:1000px;font-size:20px;color:#fff;line-height:100px;text-align:center;background:#000; 

}
ul.box li{ -webkit-transition: width 0.2s ease, height 0.2s ease;  
    -moz-transition: width 0.2s ease, height 0.2s ease;  
    -o-transition: width 0.2s ease, height 0.2s ease;  
    -ms-transition: width 0.2s ease, height 0.2s ease;  
    transition: width 0.2s ease, height 0.2s ease; 
    overflow: hidden; }  

.item:hover
{  
display: block;
      width:200px;height:200px;border-radius:1000px;font-size:30px;color:#fff;line-height:100px;text-align:center;background:#333;
      overflow: hidden;  
}

http://jsfiddle.net/Fgnmw/7/

用css圈导航动画？

2 个答案:

Here is the fiddle.