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

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

当我悬停在狗的图像上时，我想显示我的extra_info div的内容。

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

JSFiddle观

2 个解决方案

#1

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

你可以使用相邻的同胞选择器+或者在这种情况下你也可以使用一般的同胞选择器~这里是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>

#2

-1

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.

div元素可以构建锚的子元素。

#1