怎样让鼠标滑过每个元素时加边框，但是原来的位置不会因为边框而轻微移动

再写页码的时候，希望鼠标滑过每一行的数字时，他会自动加个边框。但是加了边框肯定就影响原来的位置啦。

这时我们需要在开始的时候就加一个和背景一样颜色的边框。这样hover的时候就不会移动位置啦

<div class="pagination">
            <ul >
                <li>
                     <a href="#">1</a>
                </li>
                <li>
                     <a href="#">2</a>
                </li>
                
                <li>
                     <a href="#">></a>
                </li>
            </ul>
</div>

.pagination ul li{
    display:inline-block;
    padding:10px 16px;
    cursor:pointer;
    border: 2px solid #F8F2DA;
}
.pagination ul li:first-child{border:2px solid #333;}
.pagination ul li a{color:#333;font-size:18px;font-weight:bold;display:block;}
.pagination ul li:hover{border:2px solid #333;}
.pagination ul li a:hover{text-decoration: none;}

下面重新补充一个朋友提供的更加简单的方法，

再鼠标划过时，添加边框，再加一个margin设置成负数，值就是你所设的边框的宽度。