Question

我在每个<li>之前创建了一个带有图标的小菜单，图标只是一个用css定位的图像。所以你得到一个按钮<li>首先带有图标，然后在图标后面加上'Home'这个词，例如

当您悬停<li>时，图标会变大，并从黑色变为白色。这是JS：

$(document).ready(function(){
    $(".ca-menu li:nth-child(1)").hover(
    function(){
        $(".icon").attr('src',"images/home2.png");
        $(".icon").stop().animate({width:32,height:32,marginLeft:-8,marginTop:-8}, 200 );

    },
    function(){
        $(".icon").attr('src',"images/home.png");
        $(".icon").stop().animate({width:16,height:16,marginLeft:0,marginTop:0}, 200 );

    });
});

正如您所看到的，这仅适用于<ul>的第一个孩子。现在我不想在我的菜单中为我的4个链接复制粘贴4次。有没有办法让我自动化？你可以制作一个从1到4的循环，我可以放在nth-child(i)中。 AND 有没有办法自动选择图片来源？（它们都在地图图像中，但它们有不同的名称：home.png，about.png，contact.png，...）

Answer 1

$(document).ready(function(){
    $(".ca-menu li").hover(
    function(){
        $(this).find(".icon").attr('src',"images/home2.png").stop().animate({width:32,height:32,marginLeft:-8,marginTop:-8}, 200 );

    },
    function(){
        $(this).find(".icon").attr('src',"images/home.png").stop().animate({width:16,height:16,marginLeft:0,marginTop:0}, 200 );

    });
});

JQuery为不同的<li>项目</li>自动化功能

1 个答案: