如何仅使用CSS在另一个元素的悬停上显示div

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

Answer 1

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> 

Answer 2

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.