JQuery li onhover show another li

Question

Prob quite simple JQuery thing but I am looking to do something like this:

<ul>
<li>menu item1</li>
<li>menu item2</li>
</ul>

Which on hover display images from another UL LIlist e.g.

<ul>
<li>image 1</li>
<li>Image 2</li>
</ul>

Any suggestions please -= thanks

Answer 1

You need something like This but lil bit modified :)

Answer 2

You can use the index (1.4) method to determine which li was hovered. Then make the images visible. This is just a start and will require some CSS etc to make it look good.

   $("otherUl li").hide(); //hide all images to start
   $("#myUL li").hover(function(){
         i = $(this).index(); //gets the current index 0 based
         $("#otherUL li:nth-child(i+1)").show();//gets the index of the image element 1 based
    }
   , function(){
         $("#otherUL li").hide(); //hide all on mouse out
     });