Question

我有一张图片列表。以下是相关的HTML代码：

<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="t1.jpg"></a></li>
<li><a href="h2.jpg"><img alt="" src="t2.jpg"></a></li>
<li><a href="h3.jpg"><img alt="" src="t3.jpg"></a></li>
<li><a href="h4.jpg"><img alt="" src="t4.jpg"></a></li>
<li><a href="h5.jpg"><img alt="" src="t5.jpg"></a></li>
<li><a href="h6.jpg"><img alt="" src="t6.jpg"></a></li>
</ul>

当其中一个图像获得焦点或悬停时，会显示一个边框，下面是css页面中的代码：

li a:focus img {
    border: 2px solid blue;
}       

li a:hover img {
    border: 2px solid blue;
}

此代码正在运行，但问题是当此图像开启焦点或悬停时，页面中的所有元素都会移动，这就像整个页面在图像列表上移动时跳跃一样。我试过在css中使用代码，但没有成功。

img {
position: absolute;
}

以及以下内容：

img {
position: relative;
left: 20px;
}

有人知道如何解决这个问题吗？谢谢!!

Answer 1

使用outline代替border：

＆＃13;

li a:focus img {
  outline: 2px solid blue;
}       

li a:hover img {
  outline: 2px solid blue;
}

＆＃13;

<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h2.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h3.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h4.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h5.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h6.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
</ul>

＆＃13;

Answer 2

您可以使用负边距。

＆＃13;

li a:focus img {
  border: 2px solid blue;
  margin: -2px;
}       

li a:hover img {
  border: 2px solid blue;
  margin: -2px;
}

＆＃13;

<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h2.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h3.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h4.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h5.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h6.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
</ul>

＆＃13;

参考：Image Rollover Borders That Do Not Change Layout

Answer 3

我总是为显示边框时删除的每个元素添加一个边距。

li a img {
 margin: 2px;
}

li a:focus img {
margin: 0;
border: 2px solid blue;
}       

li a:hover img {
margin: 0;
border: 2px solid blue;
}

Answer 4

总是有一个2px的边框，但它不会悬停时是透明的。

li a img {
    border: 2px solid transparent;
}

li a:focus img,
li a:hover img {
    border-color: blue;
}

我喜欢这样做而不是操纵边距，因为有时你可能实际上也想要一个边距。我宁愿使用保证金用于它应该用于什么，而不是在保证金和没有保证金以及边界和边界之间翻转。在我看来，似乎更清洁。

工作示例：

＆＃13;

li a img {
  border: 2px solid transparent;
}       

li a:focus img,
li a:hover img {
  border-color: blue;
}

ul {
  list-style: none;
}

li {
  display: inline-block;
  margin: 5px;
}

＆＃13;

<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h2.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h3.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h4.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h5.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h6.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
</ul>

＆＃13;

Answer 5

默认设置透明边框：

＆＃13;

li a img {
  border: 2px solid transparent;
}

li a:focus img {
 border: 2px solid blue;
}       

li a:hover img {
 border: 2px solid blue;
}

＆＃13;

<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="http://placehold.it/350x150&text=1"></a></li>
<li><a href="h2.jpg"><img alt="" src="http://placehold.it/350x150&text=2"></a></li>
<li><a href="h3.jpg"><img alt="" src="http://placehold.it/350x150&text=3"></a></li>
<li><a href="h4.jpg"><img alt="" src="http://placehold.it/350x150&text=4"></a></li>
<li><a href="h5.jpg"><img alt="" src="http://placehold.it/350x150&text=5"></a></li>
<li><a href="h6.jpg"><img alt="" src="http://placehold.it/350x150&text=6"></a></li>
</ul>

＆＃13;

Answer 6

这是我在这个主题上见过的最好的信息。 http://css-tricks.com/image-rollover-borders-that-do-not-change-layout/

必须阅读有关此问题的资源。

当另一个元素改变大小时，如何避免html页面中的元素移动

6 个答案: