0

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;
}
Danny Cooper
  • 355
  • 1
  • 8
  • 25
  • 1
    You can't do that because you are trying to match a previous sibling. Similar question: http://stackoverflow.com/questions/1817792/css-previous-sibling-selector – 4lbertoC May 18 '13 at 09:38
  • Agree with @4lbertoC. You could place the image after the text link in your html, and then postition it on top of the page by means of css, to be positioned on top of the page, [something in this direction](http://jsfiddle.net/xpFAf/1/) – Martin Turjak May 18 '13 at 09:45
  • 1
    Something like this? [**link**](http://jsfiddle.net/Rtz3w/) – Mr_Green May 18 '13 at 09:49
  • @Mr_Green jQuery is not exactly a CSS :hover solution, but anyway a good suggestion ^_^ I just updated your [jsfiddle](http://jsfiddle.net/Rtz3w/2/) to do more explicitely what OP wants. – Martin Turjak May 18 '13 at 09:59
  • @MartinTurjak I think this is still broken.. Not working as expected on Chrome. – Mr_Green May 18 '13 at 10:01
  • @Mr_Green I am not sure what you are talking about is broken? In your solution (as well as in your solution with my update with id selectors in jquery) the [opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) works fine for me in Chrome 26. – Martin Turjak May 18 '13 at 10:08
  • @MartinTurjak lol I have chrome 26 but it is not working.. (I don't know why, maybe problem with my PC). I just shared idea that it could be done like this without testing it. :) (that's why I added weird borders). – Mr_Green May 18 '13 at 10:14
  • @Mr_Green Well, I think it is not a bad alternative, if someone is willing to use jQuery, hence my +1 on your comment above ^_^ – Martin Turjak May 18 '13 at 10:16

1 Answers1

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

vusan
  • 5,221
  • 4
  • 46
  • 81