0

すべての前にアイコン付きの小さなメニューを作成しました<li>。アイコンはcssで配置された単なる画像です。したがって、最初にアイコンと同じようにボタンが表示さ<li>れ、アイコンの後に「ホーム」という単語が表示されます。

にカーソルを合わせる<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)。また、画像ソースを自動的に選択する方法はありますか? (それらはすべて地図画像にありますが、名前が異なります: home.png、about.png、contact.png、...)

4

1 に答える 1

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

    });
});
于 2013-04-30T13:07:51.290 に答える