在悬停时添加边框时如何防止移位？ （透明边框不是解决方案）

Question

我想在悬停时为div添加边框，但是在添加边框时，div会略微拉扯。这是一个众所周知的问题，常见的解决方案是添加透明边框。 （For example）但是，我的div中有一些带有文本的图像，我希望图像占据div的全宽。添加透明边框会使背景颜色显示出来而不是占据整个宽度。

HTML：

<div class="outer-container">
  <div class="inner-container" contenteditable="true">
    <img src="./testing.png">
    some other text
  </div>
</div>

CSS：

.outer-container {
  width: 100%;
  background: #000000
}
.inner-container {
  margin: auto;
  width: 300px;
  margin-bottom: 0px;
  background: #FF0000;
  border: 1px solid transparent;
}
.inner-container:hover {
  border: 1px solid blue;
}

jsfiddle for demo

div的高度在实际使用中是可变的，因为它将由用户上传。我知道我可以用javascript解决这个问题，但有没有办法只用CSS制作想要的效果？

Answer 1

您可以使用outline属性

进行修复

.inner-container:hover {
  outline: 1px solid blue;
 }

如果你使用大边框 的例如  设置outline:3px; solid blue;然后使用outline-offset:-3px;

尝试演示

https://jsfiddle.net/be7441LL/2/