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;
}

分页项目在悬停和添加边框时移动

1 个答案: