CSS转换没有很好的行为

Question

我有一些导航链接，我正在使用css转换。

这里的CSS ...

 ul.yui-nav { list-style-type: none; } 
     ul.yui-nav li { 
      display: inline-block; 
      text-align: center; 
      height: 110px; 
      width: 110px; 
      border: none; 
      background: none; 
     } 
     ul.yui-nav li:hover { 
      background: none; 
      border: 1px solid #ccc; 
      border-radius: 50%; 
      height: 110px; 
      width: 110px; 
      transition: all 275ms; 
      -moz-transition: all 275ms; /* Firefox 4 */ 
      -webkit-transition: all 275ms; /* Safari and Chrome */ 
      -o-transition: all 275ms; /* Opera */ 
     } 
     ul.yui-nav li a { 
      font-style: normal; 
      border-radius: 50%; 
      height: 100px; 
      width: 100px; 
      background: #ccc; 
      float: left; 
      color: #fff; 
      text-decoration: none; 
      font-size: 50px; 
      font-family: 'Oswald', sans-serif; 
      margin: 0 11px; 
      font-weight: 700; 
      margin: 5px 5px; 
     } 
     ul.yui-nav li a span { font-size: 16px; font-weight: 400; } 

这里是HTML ...

     <ul class="yui-nav"> 
          <li><a href="#preface">Preface</a></li> 
          <li><a href="#step1">1<br/><span>Step</span></a></li> 
          <li><a href="#step2">2<br/><span>Step</span></a></li> 
          <li><a href="#step3">3<br/><span>Step</span></a></li> 
          <li><a href="#step4">4<br/><span>Step</span></a></li> 
          <li><a href="#step5">5<br/><span>Step</span></a></li> 
          <li><a href="#submit">Submit</a></li> 
         </ul> 

这里是一个JS拨弄这一切的工作（不介意文字不看右）...... JS Fiddle

我遇到的问题是，当你将鼠标悬停在圆上，在过渡期间，边框从黑色方块变成灰色c ircle边界。我只是想要一个灰色的边框从圈子中出来，我不明白为什么它没有正确地发生。

Answer 1

我不确定如果我underestand你的问题。问题是从开始动画的黑色？您可以在下一行中修复它：

... 

ul.yui-nav li { 
    ... 
    border-color:#ccc; 
} 

... 

这是正确的吗？

Answer 2

将border-radius: 50%;添加到您的ul.yui-nav li选择器。这表明它即使没有边框也是圆形的。

演示：

ul.yui-nav li { 
    border-radius: 50%; 
    display: inline-block;  
    text-align: center;  
    height: 110px;  
    width: 110px;  
    border: none;  
    background: none;  
}