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

Question

extra_info当我将鼠标悬停在狗的图像上时,我想显示我div 的内容.

我看过这样的语法:

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

但是我无法让它发挥作用!
到目前为止,这是我的代码:

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

在JSFiddle上查看

Answer 1

您可以使用或在这种情况下,您也可以在这里使用Adjacent sibling selector +General sibling selector ~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>