我也遇到了同样的问题。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;
}