使用 <br> [重复] 悬停时不显示图像

Question

我正在为网页创建一个简单的效果。当鼠标悬停在链接上时，我想显示图像。问题是，当我使用<br> 标签时，图像不会在悬停时显示，但是当我删除<br> 时它可以工作。

谁能告诉我这里有什么问题？为什么<br> 会阻碍悬停？这是一个显示 <br> 不起作用的 sn-p：

.imageClass{ 
  display: none; 
} 

a:hover + .imageClass{ 
  display: block; 
}

<a href="http://esmartify.com/">Esmartify</a>
<br>
<!--When i remove this line, image is shown on hover, otherwise not-->
<div class="imageClass">
  <img src="images6/concert.jpg" width="100%">
</div>

这是一个显示 没有<br> 的 sn-p：

.imageClass {
  display: none;
}
a:hover + .imageClass {
  display: block;
}

 <a href="http://esmartify.com/">Esmartify</a>
<!--When i remove this line, image is shown on hover, otherwise not-->
<div class="imageClass">
  <img src="images6/concert.jpg" width="100%">
</div>

Answer 1

a:hover + .imageClass - imageClass 必须紧跟在链接之后，删除 br 并添加到 css display:block 以进行链接

或尝试使用：a:hover ~ .imageClass

Answer 2

我的猜测是br 表现为链接和 div 之间的元素。如果是这样，a:hover ~ .imageClass 应该可以工作。