How to Affect Adjacent Element with CSS Hover

Question

Here's my 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>

I want to lower the opacity of the image in the link on top when the link on the bottom of the page is hovered over. I tried doing the following, but it hasn't worked.

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

Answer 1

You can make flexi-overlay-image-link-container the child of flexi-overlay-text-container and change css like:

#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