画像がホバーに表示されない<br>

Question

ウェブページに簡単な効果を作り出していました。私はマウスがリンク上にぶら下がったときにイメージを表示したかったのです。問題は、私が<br>タグを使用すると、イメージがホバーに表示されないが、私が<br>を取り除くとそれが機能するということです。

誰でも問題を教えていただけますか？ <br>がホバリングを妨げるのはなぜですか？ここで<br>が動作していないことを示すスニペットです：

.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>なしで働いているを示す抜粋です：

.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が動作するはずです。