如何防止悬停时添加边框时发生偏移?(透明边框不是解决方案)

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;
}

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

试用演示

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