html - 如何使用 CSS Hover 影响相邻元素

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