Hello. On the page I bring out links from the database, as a result a list of the form appears on the page:

Reference 1

Reference 2

Reference 3

Reference 4

Reference 5

etc., the list is big.

I deduce a method

while ($my_link = mysql_fetch_assoc($all_link)) { <div class="link"><a href="$my_link[url]">$my_link[name]</a></div> if ($my_link['photo'] != NULL) { <div class="link_ph"><img src="/photo/$my_link[photo]"></div> } }

As you already understood from the code, a photo is displayed under each link. So, I want to make the photo appear under the link only if the link was hovered over with the mouse.

I would be grateful for any help in this task.

    1 answer 1

    css:

     div.link_ph { position: absolute; display: none; z-index:5 } div.link:hover + div.link_ph { display: block; }

    html:

     <div class="link"><a href=''>name</a></div> <div class="link_ph" ><img src="url"></div> <div class="link"><a href=''>name</a></div> <div class="link"><a href=''>name</a></div> <div class="link_ph" ><img src="url"></div>

    demo

    • Do not tell me yet how to make it so that you can hover over the image that appears? Now I just drag the cursor over the image - it disappears right away - iKey
    • I can only do it this way, maybe the gurus will say that it’s not very correct - just add css div.link:hover + div.link_ph, div.link_ph:hover - splash58
    • Something does not work this way for me)) I did div.link:hover + div.link_ph, div.link_ph: hover {display: block; } maybe what's wrong? - iKey
    • @Denis if there is an indent between the link and the picture, then the link: the hover disappears. - Jean-Claude
    • @ Denis jsfiddle.net/4j3veycs/1 - splash58