0

我有一些我正在使用 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 Fiddle，这一切都可以正常工作（不要介意文本看起来不正确）...... JS Fiddle

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

4

2 回答 2

0

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

...

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

...

它是否正确？

于 2013-02-17T23:13:37.113 回答
0

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

演示： jsFiddle

ul.yui-nav li { 
    border-radius: 50%; 
    display: inline-block; 
    text-align: center; 
    height: 110px; 
    width: 110px; 
    border: none; 
    background: none; 
}
于 2013-02-17T23:15:28.907 回答