如何影响相邻元素的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悬停

回答

相关问题