How can I display an element on hover of another?

Question

How can I display a block/text when a user hovers or clicks on an image?

I found a few good posts.

I also found external sources. Each place I went provided a solution similar to this:

HTML

<a id="thumbnail" href="#"><img src="http://dummyimage.com/150x150/0066ff/fff"></a>
<div id="title">filename.jpg</div>

CSS

#thumbnail {
    display: block;
    width: 150px;
    height: 150px;
}

#thumbnail:hover + #title {
    display: block;
}

#title {
    display: none;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    width: 130px;
    padding: 10px;
}

I don't understand what I'm doing wrong in my code though. Here's what I have:

Html

<div class="sqs-block image-block sqs-block-image" data-block-type="5" 
id="block-yui_3_17_2_2_1428673541254_6455"> </div>

<div class="sqs-block html-block sqs-block-html" data-block-type="2" 
id="block-yui_3_17_2_3_1429198468651_10272"><div class="sqs-block-content">
<p>I want this text to appear when the calendar image is hovered (and 
preferably clicked too)</p></div>

CSS

#block-yui_3_17_2_2_1428673541254_6455 {
    display: block !important;
}

#block-yui_3_17_2_2_1428673541254_6455:hover + 
#block-yui_3_17_2_3_1429198468651_10272 {
    display: block !important;
}

#block-yui_3_17_2_3_1429198468651_10272 {
    display: none;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    width: 130px;
    padding: 10px;
}

I literally just swapped out the selectors to match what I want done: When a user hovers over the calendar image on the right, I'd like text to appear on the left. I've tried other solutions, similar to this with no luck. Any ideas where I'm going wrong?

Here's a fiddle for you guys. It appears to work, at least for me: http://jsfiddle.net/p87g3fey/ — Jonas Grumann, Apr 16 '15 at 15:55
I would suggest tweaking the `p { display:none; }` as from now on all your paragraphs are going to be hidden! — Xareyo, Apr 16 '15 at 16:04
@ArchimedesPi @Xereyo @Jonas Grumann Fascinating. It works when I test it on the fiddle as well, but not when I swap the values for my site. I'm almost certain I'm referencing the correct elements. I corrected the `p { display:none;}` to the specific text. — David Nissan, Apr 16 '15 at 16:13
Are you missing `#` in front of some of your selectors or is that a typo? — Marcelo, Apr 16 '15 at 16:13
@DavidNissan `#block-yui_3_17_2_2_1428673541254_6455:hover + block-yui_3_17_2_3_1429198468651_10272` is also missing a `#` on the second part of the selector. To: `#block-yui_3_17_2_2_1428673541254_6455:hover + #block-yui_3_17_2_3_1429198468651_10272` — Marcelo, Apr 16 '15 at 16:17
@Marcelo I need to pay attention. Rest assured they have their # on the site. Thanks. — David Nissan, Apr 16 '15 at 16:18
Well, using just your IDs, this works: http://codepen.io/anon/pen/YPmoRw . Perhaps the problem is elsewhere. — Marcelo, Apr 16 '15 at 16:20

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

I found the answer.

The example code assumes the two elements (the static image and the appearing/disappearing text) are adjacent siblings.

#thumbnail:hover + #title

See here from the user who answered.

I rearranged the elements and made them adjacent. You can see results here. Roll over the calendar image. Thanks to everyone who posted, really appreciate it.

This leads to a question though: what do I need to do to the code to create the same effect but with elements that are not adjacent?

Edit: Just learned it's not possible to select the parent of an element in CSS. But I learned that altering the code above to this:

#thumbnail:hover ~ #title

Lets you select elements below; the child selector (so they don't need to be adjacent).

How can I display an element on hover of another?

1 Answers1