使用輪廓不工作的CSS懸停

我試圖用CSS重疊我的圖像上的輪廓，但輪廓未顯示出來。如果我用背景色替換大綱，它可以正常工作，但它不會達到我要去的構圖效果。我也試過使用邊框，但增加了div的大小，所以它也不起作用。我需要覆蓋div是100％的高度和寬度，因爲圖像大小是動態的。使用輪廓不工作的CSS懸停

<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/

任何理由輪廓不會被顯示出來？

來源

2013-07-19 user1898958

輪廓是不可見的，因爲輪廓出現外部的元素。在這種情況下，由於元素（div）與父元素（figure）一樣大，它會出現在figure之外。但figure有overflow:hidden。

解決方法：從圖中刪除overflow:hidden。或者將div置於其位置在figure內的位置。

來源

2013-07-19 12:59:00

正如MrLister先生指出的那樣，主要問題是圖上有overflow:hidden。 This fiddle顯示您想要工作的基本想法。

作爲另一個說明，z-index隻影響同一上下文中的元素。 Here是一個非常好的文章。所以我認爲你是真的試圖做的是把其他股利下圖像，並使其顯示懸停邊框。爲了做到這一點，他們必須在同一個上下文中繪製，這意味着他們都需要具有position屬性。這是它的一個小提琴工作：http://jsfiddle.net/P4nEK/6/

來源

2013-07-19 13:32:47

使用輪廓不工作的CSS懸停

回答

相關問題