悬停时图像不会显示为

Question

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

谁能告诉我这里的问题是什么？为什么<br>会阻碍悬停？这是一段显示<br>无效的代码：

＆＃13;

＆＃13;

.imageClass{ 
  display: none; 
} 

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是一个显示它没有<br> 的代码的片段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

Answer 2

a:hover + .imageClass - imageClass必须在链接后立即删除br并添加到css display:block以获取链接

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