0

我正在尝试使用 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>
4

2 回答 2

1

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

这是小提琴。

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;  
}
于 2013-01-30T15:42:23.693 回答
0

它们都显示了使用此选择器将效果应用于所有项目的效果：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/

于 2013-01-30T16:36:44.617 回答