分頁項目懸停並添加邊框

Question

當懸停時，此菜單項正在移動。如何在懸停時如何使項目靜止而不移動。 當放置特定的寬度和高度時，會發生同樣的事情。 這是新的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> 

Answer 1

根據你的代碼，和/或選擇的狀態與邊框一起去懸停4px：

border: 4px solid #F0F0F0; 

這導致4像素的位移offcourse，解決方法：

具有相同的顏色添加邊框，爲你的網站的佔位符的背景，然後徘徊的時候，改變border-color。

.pagination li{ 
    border: 4px solid #fff; 
} 
.pagination li.selected, .pagination li:hover { 
    border-color: #F0F0F0; 
}