0

<ul>ホバーすると（アニメーションで）大きくなるアイテムがあります。今、私はそれらを画面の右側に配置し（クラスのCSSright:0emを使用）、 on hoveの位置を固定に設定して、成長するにつれて左に移動するだけで、すべてのオブジェクトでは、右側にとどまります。問題は、その結果、カーソルを合わせると、次のアイテムが「下」になることです。どうすればそれを変更できますか? (ホバー時の水平位置プロパティのみを制御する方法はあるのでしょうか?)<li><li><li>

コード：

http://jsfiddle.net/KBprd/2/

4

2 に答える 2

1

開始するコードがなければ、それを助けるのはちょっと難しいです。しかし、私が収集できたものに基づいて、あなたはすべてのアイテムがメニューの右側と同じ高さに保たれることを望んでいます。「ホバーされた」要素のみがコンテナの右側から移動します。これを行う方法の例をまとめました。これがあなたが探しているものではない場合は、コメントでいくつかのコードまたは詳細を提供してください、そして私たちはそこから行くことができます...

これが更新されたフィドルです

CSS：

.navigation{
    position:fixed;
    z-index:1;
    top:3em;
    right:0em;

}
.navigation li.slide{
    color:#000000;
    display:block;
    padding: 0 10px;
    line-height:30px;
    margin-bottom:2px;
    font-weight:light;
    background:#00C9FF;
    -webkit-transition: all .2s ease-in-out;
    text-align:right;
    width:53px;
    float:right;

}
.navigation li:hover,.active{
    font-size:25px;
    cursor:pointer;
    width:100px!important;
    background:#5C0CE8;
}
.navigationClear {
    clear:both;
    height:1px;
     margin-bottom:-1px;  
}​

HTML：

<ul class="navigation">
        <li data-slide="1" class="slide">Slide 1</li>
        <li class="navigationClear"></li>
        <li data-slide="2" class="slide">Slide 2</li>
        <li class="navigationClear"></li>
        <li data-slide="3" class="slide">Slide 3</li>
        <li class="navigationClear"></li>
        <li data-slide="4" class="slide">Slide 4</li>
        <li class="navigationClear"></li>
</ul>​
于 2012-11-26T16:36:24.027 に答える