-1

私のサイト: http://warringah-plastics.com.au/wplasticsにアクセス すると、メイン ナビゲーションのメニュー項目にカーソルを合わせると、その上にインジケーターの矢印が表示されます。次に、マウスをメニュー上で左から右に移動すると、CSS トランジションが非常にスムーズになります。しかし、右から左に移動すると、トランジションがメニュー項目を通り過ぎて見栄えがよくありません。現在、この CSS を nav li 要素に適用しています。

トランジション: すべて 0.5 秒のイーズイン アウト 0 !重要;

ホバー CSS を試してみましたが、うまくいきませんでした。前もって感謝します！

4

1 に答える 1

4

編集：

CSS のみのアプローチを使用することをお勧めします。これを行う方法はたくさんあります。少なくとも私にとってはかなり滑らかに見えます。JSFIDDLE: http://jsfiddle.net/Victornpb/u85as/226/およびhttp://jsfiddle.net/Victornpb/u85as/236

ul{
    width: 100%;
    margin: 0;
}
li{
    display: inline-block;
    border: 1px solid red;

    width: 100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

li:nth-child(1):hover ~ #arrow{
    margin-left: 0;
}
li:nth-child(2):hover ~ #arrow{
    margin-left: 100px;
}
li:nth-child(3):hover ~ #arrow{
    margin-left: 200px;
}
li:nth-child(4):hover ~ #arrow{
    margin-left: 300px;
}
li:nth-child(5):hover ~ #arrow{
    margin-left: 400px;
}

li:hover ~ #arrow{
    opacity: 1;
}

#arrow{
    margin-left: -50px;
    border:0px solid red;
    position:relative;
    width:100px;
    text-align:center;
    opacity: 0;

    transition:All 1s ease;
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
}
#arrow:before{
    content:"";
    display:block;
    width:0;
    border:10px solid red;
    border-color:red  transparent transparent transparent;
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-10px;
}

マークアップ:

<ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>

    <div id="arrow"></div>

</ul>

ノート

移行が見られません。

ここに画像の説明を入力

しかし、どこかで深刻なリークが発生しています。最初に、ページがすべてをロードするのにほぼ 1 分かかりました。リクエスト バー (青色) は、44.5 秒で読み込みを停止します。

それまでは、ページは 100 万回のイベントのようにトリガーされます。真剣にスクロールバーのサイズを見てください。そして巨大な黄色いバー。

ここに画像の説明を入力

于 2013-01-22T04:37:58.440 に答える