如何影響相鄰元素的CSS懸停

這裏是我的HTML：如何影響相鄰元素的CSS懸停

<div id="flexi-overlay"> 
     <a id="flexi-overlay-image-link-container" href="#" class="popup image-link"?> 
      <img src="image.jpg" /> 
     </a>    
     <span id="flexi-overlay-text-container"> 
      <a href="#"> 
       <span class="flexi-link" id="title-1">Modern Duets</span> 
       <span class="flexi-link" id="title-2"><em>Flexi Compilation</em></span> 
       <span class="flexi-link" id="title-3"><strong>**New**</strong></span> 
      </a> 
     </span> 
</div>

我希望在頁面底部的鏈接懸停降低圖像的鏈接中的不透明度之上。我嘗試了以下，但它沒有奏效。

#flexi-overlay-text-container + #flexi-overlay-image-link-container { 
    filter: alpha(opacity=60); 
    opacity:.6; 
}

來源

2013-05-18 Danny Cooper

你不能這樣做，因爲你要匹配前一個同級。類似的問題：http://stackoverflow.com/questions/1817792/css-previous-sibling-selector – 4lbertoC

同意@ 4lbertoC。您可以將圖片放置在html文本鏈接之後，然後通過css將其放在頁面頂部，以便位於頁面頂部，[在這個方向上的某個東西]（http://jsfiddle.net/xpFAf/1 /） –

像這樣？ [**鏈接**]（http://jsfiddle.net/Rtz3w/） –

您可以flexi-overlay-image-link-container的flexi-overlay-text-container孩子和改變CSS，如：

#flexi-overlay-text-container:hover>#flexi-overlay-image-link-container { 
    filter: alpha(opacity=60); 
    opacity:.6; 
} 
#flexi-overlay-image-link-container:hover { 
    filter: alpha(opacity=100) !important; 
    opacity:1 !important; 
}

jsFiddle

來源

2013-05-18 09:44:48 vusan

如何影響相鄰元素的CSS懸停

回答

相關問題