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

Question

我想在悬停时向div添加边框，但是添加边框时div会稍微变糟。这是一个众所周知的问题，常见的解决方案是添加透明边框。（例如）但是，我的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进行演示

div的高度在实际使用中是可变的，因为它是由用户上传的。我知道我可以用javascript解决问题，但是有没有办法我只能用CSS达到预期的效果？

Answer 1

您可以使用outline属性简单地解决此问题

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

如果您使用大边框， 例如： set outline:3px; solid blue;然后使用outline-offset:-3px;

尝试演示

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