Question

我想在鼠标悬停时在>上渲染一个边框，但只能使用CSS完成。

我的结构非常简单：

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

我的想法是.overlay获得5px边框，当鼠标悬停在.outer
上时变为可见
图像可以是任何宽度/高度 - 它是未知的，不能单独指定。

唯一的问题是，由于箱型法则我最终会在.outer之外呈现右边和下边框，因为100% width / height上的.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;
}

Answer 2

而不是width:100%;和height:100%，将right和bottom位置设为0px。

http://jsfiddle.net/hTECe/3/

请注意，默认情况下，图片下方会有一个小的边距。这可以通过以下任何一种解决方案来解决：

将图像设置为display:block。（见this question）
将图片的vertical-align设置为top，middle或bottom
将外框的line-height设置为0

CSS

.outer img
{
   display:block;
}

.outer:hover .overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    right:0px;
    bottom:0px;
    border: 5px solid white;
    opacity: 0.75;
}

使用动态宽度和高度为overlay元素创建边框作为父元素的子元素

2 个答案: