CSS悬停使用大纲不起作用答案

【问题标题】：CSS hover using Outline not workingCSS悬停使用大纲不起作用
【发布时间】：2013-07-18 16:41:33
【问题描述】：

我正在尝试使用 css 在我的图像上叠加一个轮廓，但轮廓没有显示出来。如果我用背景颜色替换轮廓，它可以正常工作，但它没有达到我想要的框架效果。我也尝试过使用边框，但这增加了 div 的大小，所以它也不起作用。我需要覆盖 div 的高度和宽度为 100%，因为图像大小是动态的。

<figure class="visual-thumbnail" style="overflow:hidden;position:relative;">
<div class="img-info"></div>

        <a href="http://innovationinhr.com/apploi/?p=351" class="thumbnail">
        <img width="326" height="434" src="http://innovationinhr.com/apploi/wp-content/uploads/2013/07/unknown-326x434.jpeg" class="attachment-visual-thumbnail wp-post-image" alt="Sharif">        



        </a>
    </figure>


figure{ display:block;overflow: hidden;
position: relative;width:326px;height:435px;}


.img-info {
outline: solid black 25px;
background-color: black;
left: 0;
top: 0;
opacity: 0;
position: absolute;
filter: alpha(opacity = 0);
width: 100%;
z-index: 1000;
height: 100%;
}
.visual-thumbnail:hover .img-info{
opacity:.5;
}

http://jsfiddle.net/P4nEK/1/

大纲不显示的任何原因？

【问题讨论】：

标签： html css overlay border outline

【解决方案1】：

轮廓是不可见的，因为轮廓出现在元素的外部。在这种情况下，由于元素 (div) 与父元素 (figure) 一样大，它会出现在 figure 之外。但是figure 有overflow:hidden。

解决方法：把图中的overflow:hiddens都去掉。或者将div 放置在其轮廓位于figure 内的位置。

【讨论】：

【解决方案2】：

正如 MrLister 指出的那样，主要问题是您在图中有 overflow:hidden。 This fiddle 显示了您想要工作的基本想法。

另外，z-index 只影响同一上下文中的元素。 Here 是一篇非常好的文章。所以我认为您真正想要做的是将另一个 div 放在图像下方并使其在悬停时显示边框。为此，它们必须在相同的上下文中绘制，这意味着它们都需要具有position 属性。这是它的工作原理：http://jsfiddle.net/P4nEK/6/

【讨论】：