CODEWITHSUNDEEP
csscss-selectorselementshow-hide
David Nissan
David Nissan

Reputation: 11

How can I display an element on hover of another?

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?

Upvotes: 0

Views: 250

Answers (1)

David Nissan
David Nissan

Reputation: 11

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).

Upvotes: 1

Related Questions