How can I display a div on hover of another element using only CSS

Question

I would like to display the contents of my extra_info div when I hover over the image of the dog.

I have seen syntax like :

.circular:hover + div.extra_info { display:absolute; }

However I cannot get it to work!
Here is my code so far:

.circular { margin-top: 50px; position: relative; z-index: 199 !important; float: left; display: block; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #ffffff; } .circular:hover { border: 2px solid #16D3AE; } .extra_info { display: none; }

<img src=http://officialhuskylovers.com/wp-content/uploads/2015/05/Cute-dog-listening-to-music-1_1.jpg class="circular"> <div class="extra_info"> <h3>A lovely doggy woggy</h3> </div>

View on JSFiddle

display should be like block not absolute, absolute is for position — Patrick Evans
– Patrick Evans, Commented Jan 29, 2016 at 17:36

Nenad Vracar · Accepted Answer · 2016-01-29 17:40:06Z

You can use Adjacent sibling selector + or in this case you can also use General sibling selector ~ here is Fiddle

.circular { margin-top:50px; position: relative; z-index:199 !important; float:left; display:block; width: 50px; height: 50px; border-radius: 50%; border:2px solid #ffffff; } .circular:hover{ border:2px solid #16D3AE; } .extra_info{ display:none; } .circular:hover + .extra_info { display: block; }

<img src=http://officialhuskylovers.com/wp-content/uploads/2015/05/Cute-dog-listening-to-music-1_1.jpg class="circular"> <div class="extra_info"> <h3>A lovely doggy woggy</h3> </div>

So I had it - but my element was not adjacent - and therefore it didnt work :) Thanks!

Dis_Pro · Accepted Answer · 2016-01-29 17:43:41Z

div.extra_info{ display: none; } a:hover + div.extra_info{ display: block; }

This will work for following.

<a>Content</a> <div>Content display on hover</div>

div element can be build a child of the anchor.

Collectives™ on Stack Overflow

How can I display a div on hover of another element using only CSS

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related