css - 分页元素在悬停时移动并添加边框

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个像素，解决办法:

添加与您网站背景颜色相同的边框作为占位符，然后在悬停时更改 border-color。

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