CSS絕對定位懸停

我有塊有透明背景，但爲了防止從透明文本我絕對定位塊，並把它放在內容塊後面。但現在我需要改變懸停的背景（包括兒童在內的所有塊）。是否有可能實現這隻使用CSS？此外，我需要它在IE 7上工作..CSS絕對定位懸停

下面是它如何工作的示例。

CSS

.block 
{ 
    position:relative; float:left; 
} 

span 
{ 
    position:relative; float:left; 
    z-index: 5; 
    background-color: red; 
    margin: 5px  
} 

.bg 
{ 
    background-color: blue; 
    position:absolute; 
    left: 0; top: 0; 
    width: 100%; height: 100%; 
    opacity: 0.5; 
} 

.bg:hover 
{ 
    opacity: 1.0; 
}

HTML

<div class="block"> 
    <span>this</span> 
    <span>is</span> 
    <span>some</span> 
    <span>content</span> 

    <div class="bg"> 
    </div> 
</div

http://jsfiddle.net/insanebits/wHBXn/4/

編輯：

問：是否有可能在abosolutely定位後臺實現上懸停背景顏色變化？

來源

2013-07-04 insanebits

您可以在rgba中設置父容器背景，因此您不必在其後面放置額外的元素 – Stefan

您的問題是什麼？ – Alp

@StefanV。在IE7上'rgba'不支持 – fcalderan

背景在你的例子中，當你將鼠標懸停在文本上時，懸停不起作用。懸停在塊上時需要更改背景不透明度。下面是例子：

.block:hover .bg{ 
    opacity: 1.0; 
}

來源

2013-07-04 10:10:54 pRemon

這是我需要實現的。 – insanebits

你可能會刪除空div並創建一個24位png文件與藍色背景和50％的不透明度把爲您.block元素的background-image

然後，只需更改與.block:hover { ... }

來源

2013-07-04 09:51:58 fcalderan

我認爲這可以使用javascript來實現，並且它會比加載png圖像更快..但它會是理想的實現它只使用css – insanebits

不，你只需要一個小的（例如10x10）圖像沿x/y軸重複。你甚至可以把它編碼爲data-uri資源並保存請求......並在現代瀏覽器上使用rgba – fcalderan

.bg:hover 
{ 

    opacity:0.4; 
filter:alpha(opacity=40); 

}

使用.bg該選項：hover..Its在所有IE瀏覽器的工作。

來源

2013-07-04 10:28:18

@insanebits，請使用my.bg：hover類而不是ur .bg：hover .. –

CSS絕對定位懸停

回答

相關問題