Question

我正在艰难地绕着这个缠绕我。

nav concept http://i44.tinypic.com/k96u04.png

悬停导航栏按钮会更改其各自“聚光灯”的图像，即直接位于其下方的聚光灯。

我一直在尝试许多不同的方法，因为我还远没有记住jQuery的全部功能，我只是无法掌握这个。

到目前为止，这是最好的一个，但它要求我为每个元素分配一个ID，而且我无法弄清楚如何获得一个好的交叉淡入淡出。

$('a#nav2').hover(function() {
    $('#nav2_light').attr("src","../img/nav/light_bright.png");
}, function() {
    $('#nav2_light').attr("src","../img/nav/light.png");
});

我试图找到： 1.为每个导航按钮及其各自的聚光灯实现此目的的更有效方法 2.一种交叉淡化图像的方法。 fadeOut和fadeIn在淡化下一张图片之前完全淡化图片，这不是我想要的。

我理解与此类似的问题已被提出，但我发现的问题都只有一个图像。我想为每个菜单项重复该功能。想法？提前感谢您的帮助！

编辑：为了澄清，导航按钮和聚光灯是单独的实体。我不确定在这种情况下这是否会起作用。在插图中，我将导航按钮全部放在一个div中，将聚光灯放在另一个div中。

编辑2：我已经玩了一下，如果我只是为每个人分配一个ID，我认为它有效。但是，我仍在寻找一种方法让交换做交叉淡入淡出。如果我使用.attr函数，任何人都知道怎么做？

Answer 1

为要添加此功能的每个元素使用class

$('.class_name').hover(function() {     
$(this).attr("src","../img/nav/light_bright.png");         
}, function() {  
   $(this).attr("src","../img/nav/light.png"); 
});

导航按钮悬停将交换相应的图像

1 个答案: