nastalgia nastalgia - 1 year ago 64
CSS Question

Displaying text when mouseover a list image

I am generating a list of images that scrolls horizontally on a page using:

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

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.

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 Source

Here is an example using jQuery (can be done in pure JS):

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:

    $("#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(){
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download