0

CSSでサークルナビゲーションをアニメーション化しようとしていますが、問題は、メニューリンクの1つにマウスを合わせると、選択したリンクだけに表示したい効果がすべてのメニューで使用されることです。これを行う方法はありますか？

これが私の結果へのリンクです：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をこれに変更し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 に答える