CSS悬停边框会使元素微调

Question

CSS悬停边框会使元素微调

75

我有一个包含锚点的无序列表。我有一个CSS :hover事件，它会添加边框，但当我悬停时，所有锚点都会向左微调，因为它添加了1像素的宽度并自动调整。如何确保位置是绝对的？

div a:visited, #homeheader a{
    text-decoration:none;
    color:black;
    margin-right:5px;
}
div a:hover{
    background-color:#D0DDF2;
    border-radius:5px;
    border:1px solid #102447;
}

div li{
    padding:0;
    margin:0px 10px;
    display:inline;
    font-size:1em;
}

<div>
    <ul>
        <li><a href ="#">this</a></li>
        <li><a href ="#">that</a></li>
        <li><a href="#">this again</a></li>
        <li><a href="#">that again</a></li>
    </ul>
</div>

我在这里制作了一个JS Fiddle演示。

- user1082764

3

边框在大小计算中很重要，因此如果你添加了1像素的边框，你需要将高度/宽度缩小1像素来进行补偿。 - Marc B

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mccc · Answer 1

在悬停时添加负边距来进行补偿：

#homeheader a:hover{
    border: 1px solid #102447;
    margin: -1px;
}

更新的 fiddle

在这个 fiddle 中，margin: -1px; 有点复杂，因为有一个 margin-right 被覆盖了，但仍然只需要减去新占用的空间。

- MariusMihai92 · Answer 2

如果您也使用填充，请小心。在我的情况下，我在悬停定义中有一个5像素的填充。它应该移动到您想要悬停的元素的实际类内。

代码片段

- Jorgenrique · Answer 3

使用:before来创建边框，这样就不会修改实际内容，并且给予更多的自由。在这里检查一下： http://codepen.io/jorgenrique/pen/JGqOMb

<div class='border'>Border</div>
<div class='before'>Before</div>
div{
  width:300px;
  height:100px;
  text-align:center;
  margin:1rem;
  position:relative;
  display:flex;
  justify-content:center;
  align-items: center;
  background-color:#eee;
}
.border{
  border-left:10px solid deepPink;
}
.before{
  &:before{
    content:"";
    position:absolute;
    background-color:deepPink;
    width:10px;
    height:100%;
    left:0;
    top:0;
  }
  &:hover{
    background-color:#ccc;
    &:before{
      width:0px;
      transition:0.2s;  
    }
  }
}

- Binita Bharati · Answer 4

我也遇到了同样的问题。Wesley Murch提到的解决方法有效！即在要悬停的元素周围添加一个透明边框。

我有一个ul，每个li都添加了:hover。每次我悬停在每个列表项上时，li内包含的元素也会移动。

以下是相关代码：

html

<ul>           
    <li class="connectionsListItem" id="connectionsListItem-0">     
        <div class="listItemContentDiv" id="listItemContentDiv-0">
            <span class="connectionIconSpan"></span>
            <div class="connectListAnchorDiv">
            <a href="../test/1.html" class="homeConnectionListanchor" id="leftTabConnectionListAnchor-0">Test1</a>
            </div>
        </div>
    </li>
</ul>

CSS

.listItemContentDiv
{
    display: inline-block;
    padding: 8px;
    right: 0;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
}

.connectionIconSpan
{
    background-image: url("../images/connection4.png");
    background-position: 100% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    padding-right: 0;
    background-color: transparent;
    border: medium none;
    clear: both;
    float: left;
    height: 32px;
    width: 32px;
}

.connectListAnchorDiv
{
    float: right; 
    margin-top: 4px;
}

每个列表项上的悬停定义：

.connectionsListItem:hover
{
    background-color: #F0F0F0;
    background-image: linear-gradient(#E7E7E7, #E7E7E7 38%, #D7D7D7);
    box-shadow: none;
    text-shadow: none;
    border-radius: 10px 10px 10px 10px;
    border-color: #AAAAAA;
    border-style: solid;

}

上述代码曾经导致包含元素在我悬停在connectionsListItem上时发生移位。修复方法是将以下内容添加到CSS中：

.connectionsListItem
{
    border:1px solid transparent;
}