JQuery为不同的应用程序自动执行功能<；李>；项目

我在每个

之前创建了一个带有图标的小菜单，图标只是一个用css定位的图像。因此，您会看到一个按钮，名为

，图标前面是图标，图标后面是单词“Home”，例如

将鼠标悬停在

上时，图标会变大，并从黑色图像变为白色图像。 这是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 );

    });
});

如您所见，这仅适用于

的第一个子级。现在我不想复制粘贴这4次我的菜单中的所有4个链接。有没有一种方法可以让这一切自动化？ 你能做一个从1到4的循环吗？我可以把它放在第n个子（I）中和是否有一种自动选择图片来源的方法？（它们都在地图图像中，但它们的名称不同：home.png、about.png、contact.png等）

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

    });
});