nastalgia nastalgia - 2 months ago 9
CSS Question

Displaying text when mouseover a list image

I am generating a list of images that scrolls horizontally on a page using:
https://jsfiddle.net/9oLLv1op/3/

<ul class="images">
<a href="images/Pumpkins01.png" target="_blank">
<img src="images/Pumpkins01.png" alt="" width="300" height="400">
</a></li></ul>


When I mouse over each image I need it to display a different body of text in a different div space below the image list.
Would it be better to use css and div wrappers to do this? im pretty lost.
I have found ways to do this without the use of an unordered list but can not figure it out this way.
Any help would be appreciated.

EDIT:
I need a different body of text to be displayed for each image and the last element to be hovered over will have its text remain in the "show-me" div when the user mouses off.

Answer

Here is an example using jQuery (can be done in pure JS): https://jsfiddle.net/Pawel256/whfar56x/2/

1.Add a div in with you want to display the description for the images

2.Add mouseover and change the text inside the description div:

$(".image1").mouseenter(function(){
    $("#show-me").text('1. This is image1 description. Lorem ipsum dolor sit amet');
});

3.Remember to add mouseleave and clear the description div

$(".image1, .image2, .image3").mouseleave(function(){
    $("#show-me").text('');
});
Comments