Question

当我将鼠标悬停在狗的图像上时，我想显示normalizeTemplate div的内容。

我看过如下语法：

extra_info

然而我无法让它发挥作用！
到目前为止，这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

View on JSFiddle

Answer 1

您可以使用Adjacent sibling selector +，或者在这种情况下，您也可以使用General sibling selector ~这里Fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

div.extra_info{
    display: none;
}

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

这将适用于以下。

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

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

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

2 个答案: