Question

我创建了一个网页，其中包含三个带有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>

Answer 1

答案是边界本身。它会改变你的dom元素宽度。边框本身并没有相同宽度的关闭状态，这正是您所期望的。

相反，您需要创建关闭状态宽度以消除此抖动。

具有边框宽度的关闭状态或其他边距/填充以进行补偿。

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问题中，固定小提琴：http://jsfiddle.net/smitkhakhkhar/tn9Kj/

加

border:dashed;
border-color:transparent;

Answer 2

我在KnowHowSolutions的原创想法中做了一个很小的改变 - 谢谢！ - 并且想知道人们会对不同的方法有什么看法 - FIDDLE。

将完整的边框放入，但使其变为透明，当悬停时，请更改颜色。

这有什么缺点吗？

CSS

img {
  margin: 40px;
  margin-left: 10px;
  border: dashed;
  border-color: transparent;
}
img:hover{
  border-color: #4DFFFF;
}

为什么所有的图像都在徘徊时摇晃

2 个答案: