0

このメニュー項目は、ホバー時に移動します。ホバリング時に項目を静的にして動かないようにするにはどうすればよいですか? 特定の幅と高さを設定すると、同じことが起こります。これが新しい JSFiddle リンクです。 http://jsfiddle.net/tagaawang/zTCCf/3/

/ CSS /

    <style type="text/css">
        .div{margin:0 auto;position:relative;margin-top:40px;}
   .pagination{height: 42px;
        clear: right;
        top: -21px;
        left: 0;
        position: absolute;}
   .pagination ul{width: 100%;max-height: 42px;}
   .pagination li{font-family: 'Open Sans', sans-serif;
        list-style: none;
        cursor: pointer;
        font-weight: 600;
        line-height: 23px;
        text-indent: 8px;
        color: white;
        background-color: #0083DE;
        height: 26px;
        font-size: 14px;display: inline-block;
        width: 26px;margin-left:10px;  }
    .pagination li.selected{background-color: white;
        border: 4px solid #F0F0F0;
        padding: 5px;
        position: relative;
        font-weight: 600;
        color: #0F7ABE;
        font-family: 'Open Sans', sans-serif;}
     .pagination li:hover{background-color: #0083DE;
        border: 4px solid #F0F0F0;
        padding: 5px;
        position: relative;
        font-weight: 600;
        color: #ffffff;
        font-family: 'Open Sans', sans-serif;}​
    </style>

html

<div class="div">
<div class="pagination">
    <ul>
    <li>1</li>
    <li class="selected">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
</div>
</div>

</p>

4

1 に答える 1

4

あなたのコードに基づいて、ホバーおよび/または選択状態は4pxの境界線と一緒になります:

border: 4px solid #F0F0F0;

これにより、オフコースで 4 ピクセルのシフトが発生します。解決策:

サイトの背景と同じ色の境界線をプレースホルダーとして追加し、ホバリング時に を変更しborder-colorます。

.pagination li{
  border: 4px solid #fff;
}
.pagination li.selected, .pagination li:hover {
  border-color: #F0F0F0;
}
于 2012-10-24T11:12:39.780 に答える