jquery - 如果将<a>悬停在div上，如何显示图像？

我有

<script>
//some jQuery code is here to see img1.jpg if hovered on .img1;
//img2.jpg if hovered on .img2;
//img3.jpg if hovered on .img3
</script>

    <div id="imgs">
    <img src="img1.jpg" alt="">
    <img src="img2.jpg" alt="">
    <img src="img3.jpg" alt="">
    </div>

    <ul id="my-ul">
    <li><a href="#" class="img1">hover to see image1</a></li>
    <li><a href="#" class="img2">hover to see image2</a></li>
    <li><a href="#" class="img3">hover to see image3</a></li>
    </ul>

如果悬停的话，我希望相应的图像出现在div中，如果不悬停的话，在div中什么也看不到。
如何使用jQquery实现？

最佳答案

我建议：

$('li a').hover(
    function(){
        var i = $(this).parent('li').index();
        $('#imgs img:eq(' + i + ')').show();
    },
    function(){
        var i = $(this).parent('li').index();
        $('#imgs img:eq(' + i + ')').hide();
    });

JS Fiddle demo。