[英]CSS hover using Outline not working
我正在嘗試使用CSS在我的圖像上覆蓋輪廓,但輪廓未顯示。 如果我用背景色替換輪廓,效果很好,但是並沒有達到我想要的構圖效果。 我也嘗試使用邊框,但這增加了div的大小,因此也不起作用。 由於圖像尺寸是動態的,因此我需要overlay 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;
}
有什么理由不會顯示大綱?
輪廓是不可見的,因為輪廓出現在元素的外部 。 在這種情況下,由於元素( div
)與父元素( figure
)一樣大,因此它會出現在figure
外部。 但是該figure
已overflow:hidden
。
解決方案:從圖中移除兩個都為overflow:hidden
的對象。 或者將div
放置在輪廓線位於figure
內的figure
。
正如MrLister所指出的那樣,主要問題是您有overflow:hidden
在圖中。 這個小提琴顯示了您想工作的基本想法。
另外請注意,z-index僅影響相同上下文中的元素。 這是一篇非常好的文章。 因此,我認為您真正想做的是將另一個div放在圖片下方,並使其在懸停時顯示邊框。 為此,必須在同一上下文中繪制它們,這意味着它們都需要具有position
屬性。 這是一個有效的工具: http : //jsfiddle.net/P4nEK/6/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.