使用動態寬度和高度為overlay元素創建邊框作為父元素的子元素

Question

我想在鼠標懸停時在圖像上渲染邊框，但僅使用CSS完成它。

我的結構非常簡單：

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

我們的想法是.overlay獲得一個5px邊框，當鼠標懸停在.outer時變為可見

圖像可以是任何寬度/高度 - 它是未知的，不能單獨指定。

唯一的問題是，由於箱模型法我右邊和底部邊框最終被渲染之外.outer因為100% width / height上.overlay已經覆蓋的整個寬度outer 。

為了完全理解我想要解釋的內容， 請參閱我的jsFiddle 。

為了在我的圖像上方顯示邊框，我如何才能使.overlay完全如所需的那么寬和高？ 我正在尋找一個跨瀏覽器兼容的解決方案，因此修改有問題的元素的框模型行為似乎不是一個選項。

Answer 1

與覆蓋divs相反，只需使用偽元素:after 。 它適用於動態內容，只需要父元素。

基本上，只需將父div設置為display:inline-block與子項相同。 然后將內容設置為:after width:100% / height:100% - 從而獲取任何動態圖像的大小。 HTML很簡單，因為它只需要一個父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;
}

Answer 2

而不是width:100%; 和height:100%設置right和bottom到位置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;
}