Question

我有3个图像和一个包含3个项目的无序列表，使用jQuery如何在悬停时以正确的顺序显示1个图像。很难解释所以我会给你一些代码

<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>

当您将鼠标悬停在第1项上时，当您将鼠标悬停在第2项上时，图片1将显示，图片2将显示，依此类推...

任何建议的家伙？

Answer 1

我建议如下所示，假设您希望图像在指针离开li后再次隐藏：

$('li').hover(
function(){
 var i = $(this).index('li');
 $('img').eq(i).show();
},
function(){
 var i = $(this).index('li');
 $('img').eq(i).hide();
});

JS Fiddle demo

Answer 2

您需要更改选择器以确保不选择非预期的元素：

$("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();
});

Answer 3

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

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

$("#list li").hover(function(){$("images img").eq($(this).index()).fadeToggle();})

那就行了。

每个图像的jquery列表项

3 个答案: