Sheldon Sheldon - 6 months ago 24
Javascript Question

Display image when the cursor hovers over text

I am trying to display an image when the cursor hovers over text, based on my search, I have only been able to find the example of Dribble :
"shows text when the cursor hovers over an image".

Is there any way to find the reverse way that shows image when the cursor hovers over text?

For instance, I want to show an image when the is cursor over the text below.

enter image description here

Answer

Using CSS:

a>div { display: none; }
a:hover>div { display: block; }
<a>Caption 1
<div><img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" /></div>
</a>
<br />
<a>Caption 2
<div><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqgYUgfs11x4RdvBusUV5MOVW6ArdCgCWIzaBwRaEZA2IxP6LqxyNNQA" /></div>
</a>
<br />
<a>Caption 3
<div><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSAkk7AAsOvTw7rNLOdclqar_P8nipSY6iN87Okajo_JzZC9-Ft6j2njQ" /></div>
</a>
<br />

Comments