爲疊加元素創建邊框，作爲具有動態寬度和高度的父級子元素

Question

我想渲染邊框而不是在mouseover上的圖像，但僅使用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; 
}