html - 为覆盖元素创建边框作为具有动态宽度和高度的父元素的子元素

Question

我想在鼠标悬停时在图像上 呈现边框，但只能使用 CSS 来完成。

我的结构很简单:

<div class="outer">
    <div class="overlay"></div>
    <img />
</div>

想法是 .overlay 获得一个 5px 的边框，当鼠标悬停在 .outer 上时变得可见

图像可以是任何宽度/高度 - 它是未知的，不能专门指定。

唯一的问题是，由于盒模型法则，我最终会在 .outer 之外呈现右边框和底边框，因为 100% 宽度/高度 .overlay 已经覆盖了 outer 的整个宽度。

为了完全理解我要解释的内容，please refer to my jsFiddle .

如何使 .overlay 的宽度和高度完全符合要求，以便在图像上方完全显示边框？我正在寻找一个跨浏览器兼容的解决方案，因此修改有问题的元素的框模型行为似乎不是一个选项。

Answer 1

与覆盖 divs 相反，只需使用伪元素 :after。它适用于动态内容，只需要一个父元素。

基本上，只需将父级 div 设置为 display:inline-block 即可与子级大小相同。然后将 :after 内容设置为 width:100%/height:100% - 从而获取任何动态图像的大小。 HTML 很简单，因为它只需要一个父 div，不需要额外的 overlay 类。

jsFiddle here

HTML - 极其简单 - 没有冗余。

<div>
    <img src="https://si0.twimg.com/profile_images/2704840564/ace6835dc7c12861b013a8f1ac3b1041.png">
</div>

CSS

div {
    display: inline-block;
    background: red;
    position: relative;
}

img {
    vertical-align: top;
}

div:hover:after {
    content: "\A";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 5px solid black;
    opacity: 0.75;
    background: red;
    z-index: 2;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}