Question

I have 3 images and an unordered list with 3 items, using jQuery how can I get 1 image to show in the correct order on hover. Its hard to explain so I’ll give you some code

<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />

<ul>
   <li><a href="#">item 1</a></li>
   <li><a href="#">item 2</a></li>
   <li><a href="#">item 3</a></li>
</ul>

when you hover over item 1, image 1 will show when you hover over item 2, image 2 will show and so on…

any suggestions guys?

Answer 1

You’ll need to alter the selectors to make sure you don’t select unintended elements:

$("ul li").hover( function() {
    //Hide all the images, then select the nth image, where n is the index of the hovered item, and show it
    $("img").hide().eq( $(this).index() ).show();
},
function() {
    //On mouseleave, hide all images.
    $("img").hide();
});