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

The problem I'm having is that when you hover over the circles, during the transition the border goes from a black square to the grey circle border. I just want a grey border to come out from the circle, and I don't understand why it's not happening correctly.

4

2 に答える 2

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 に答える
0

あなたの質問を理解しているかどうかわかりません。問題はアニメーション開始時の黒い色ですか? 次の行で修正できます。

...

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

...

これは正しいです？

于 2013-02-17T23:13:37.113 に答える