如何使用CSS悬停影响相邻元素

Question

这是我的HTML：

<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;
}

Answer 1

您可以将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