Image is not displayed on hover with

Question

I was creating a simple effect for a webpage. I wanted to show an image when mouse is hovered on a link. The problem is, when I use   tag, image is not shown on hover, but when I remove   it works.

Can anyone tell me what is the issue here? Why does the   obstruct the hover? Here's a snippet showing that   is not working:

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

Here's a snippet showing it is working without  :

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

I know it is working without `
` . My question was why is this behaving like this because of a
. Atleast Try to understand the question properly and then downvote. Have some sense while downvoting. — Ravi Shankar Bharti, Oct 08 '16 at 17:23

score 1 · Answer 1 · answered Oct 08 '16 at 17:21

1

My guess is that br behaves as an element between the link and the div. If so, a:hover ~ .imageClass should work.

answered Oct 08 '16 at 17:21

Esteban Gerpe

344
1
6

Alex Muravyov · Answer 2 · 2016-10-08T17:27:42.543

0

a:hover + .imageClass - imageClass must be immediately after link, remove br and add to css display:block for link

or try to use: a:hover ~ .imageClass

edited Oct 08 '16 at 17:27

answered Oct 08 '16 at 17:19

Alex Muravyov

502
6
13

Image is not displayed on hover with

2 Answers2