我创建了一个网页，其中包含三个具有 css 属性的图像，当鼠标悬停时，它会为其添加边框，但是当我将鼠标悬停时，所有图像都会从其原始位置移动一点，以及如何将所有图像居中对齐 JSFIDDLE DEMO HERE !
<head>
<title>Play Stone Paper scissors
</title>
<style>
img {
margin:40px;
margin-left:10px
}
img:hover{
border:dashed;
border-color:#4DFFFF;
}
div{width: 90%; margin: 0px auto;
margin-top:40px;}
</style>
</head>
<body>
<div>
<img src="rock.jpg">
<img src="paper.jpg">
<img src="scissors.jpg">
</div>
最佳答案
答案是边界本身。它会改变您的 dom 元素的宽度。 Border 本身没有相同宽度的关闭状态，这是您所期望的。
相反，您需要创建关闭状态宽度来消除这种抖动。
带有边框宽度的关闭状态或一些其他边距/填充来补偿。
http://developer.mozilla.org/en-US/docs/Web/CSS/box_model
类似于:How can we avoid the shake when we hover over an element and set its border?
从上面链接的 SO 问题中，修复了 fiddle :http://jsfiddle.net/smitkhakhkhar/tn9Kj/
已添加
border:dashed;
border-color:transparent;
关于html - 为什么悬停时所有图像都会抖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24220190/