Is there an un-adjacent selector in CSS?

Question

I'm building a website where I want to hover on certain images and have them display other divs.

I found this JSfiddle which worked well. http://jsfiddle.net/ZSZQK/

<div id="image"><img src="image.png"/></div>

<div id="hover">Test message</div>

#hover {
    display: none;
}

#image:hover + #hover {
    display: block;
}

Only I need to split my divs up, meaning they are no longer adjacent, like this. http://jsfiddle.net/Z2H66/

<div class="first-container">
    <div class="image"><img src="image.png"/></div>
</div>    

<div class="second-container">
    <div class="hover">Test message</div>
</div>

.hover {
    display: none;
}

.image:hover + .hover {
    display: block;
}

What tools are at my disposal that are able to do what I'm asking?

Also note I changed my code to classes rather than ids, but that doesn't stop it working. My code doesn't work because the div hover and image are not adjacent.

score 1 · Accepted Answer · answered Nov 17 '13 at 19:41

1

Please see the modified version of your JSFiddle which uses Javascript and jQuery: http://jsfiddle.net/scorchio/ZSZQK/288/

jQuery will let you handle hover events like this easily, the key is the following:

$(document).ready(function() {
    // Hide on start
    $("#hover").hide();

    // Handle mouse over for image
    $("#image").hover(function() {
            // This one is when the mouse enters
            $("#hover").show(); 
        },
        function() {
            // ...and when it hides.
            $("#hover").hide();
    });
});

answered Nov 17 '13 at 19:41

Scorchio

2,473
2
18
27

1

Fantastic! Thanks for that. I'm using wordpress for this site so had to do a bit of research and tweaking to get it to load in a noConflict wrapper, but your code works great. – alex Nov 17 '13 at 20:30
@pappy Nice to hear that you even get the noConflict part running, thumbs up! :) – Scorchio Nov 17 '13 at 20:33

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

Well, ~ is a little less strict, but that's not going to help you here :(

With pure css, I think this is the best you can do:

.hover {
    display: none;
}

.first-container:hover ~ .second-container .hover {
    display: block;
}

See this post about css parent selectors (not implemented), and this link from one of the answers that has a javascript shim for it.

By the way, the ~ is adjacent, but not immediately adjacent, unlike the +.

edited May 23 '17 at 12:05

Community

1
1

answered Nov 17 '13 at 19:43

m59

41,346
14
107
131

While I went for the above jQuery answer, I do appreciate yours, and will look into the tilda selector for future use. Thank you. – alex Nov 17 '13 at 20:57

Is there an un-adjacent selector in CSS?

2 Answers2