0

我想在鼠标悬停时在图像上渲染边框，但仅使用 CSS 完成。

我的结构很简单：

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

这个想法是.overlay获得一个 5px 边框并在鼠标悬停时变得可见.outer

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

唯一的问题是，由于盒子模型法则，我最终会在外面渲染右边框和下边框，.outer因为100% width / heighton.overlay已经覆盖了outer.

为了完全理解我要解释的内容，请参阅我的 jsFiddle。

我怎样才能使.overlay边框完全显示在我的图像上方？我正在寻找一个跨浏览器兼容的解决方案，因此修改有问题元素的框模型行为似乎不是一个选项。

4

2 回答 2

1

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

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

jsFiddle在这里

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;
}
于 2013-10-20T00:46:51.703 回答
1

而不是width:100%;and height:100%，将rightandbottom位置设置为0px。

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

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

  • 将图像设置为display:block. （见这个问题）
  • 将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;
}
于 2013-10-20T00:50:12.457 回答