0

メニューの設定を少し変えてみます。移動できるように、すべてのタグにはIDが必要です。ただし、リンク上でマウスを実行すると、テキストが含まれているボックスを下からアニメーション化する必要があります。jqueryで指定されたIDを検索し、アニメーション化するクラスを追加するにはどうすればよいですか。

これが私のコードです：

http://jsfiddle.net/sgJUf/

HTML：

<div id="right_nav">
    <ul>
        <li><a id="nav_1" href="#">#</a></li>
        <li><a id="nav_2" href="#">#</a></li>
        <li><a id="nav_3" href="#">#</a></li>
        <li><a id="nav_4" href="#">#</a></li>
        <li><a id="nav_5" href="#">#</a></li>
        <li><a id="nav_6" href="#">#</a></li>
        <li><a id="nav_7" href="#">#</a></li>
        <li><a id="nav_8" href="#">#</a></li>
        <li><a id="nav_9" href="#">#</a></li>
    </ul>
</div>

CSS：

#right_nav { width:700px; height:auto; float:left;}
#right_nav ul { width:100%; height:100%; margin:0; padding:0;}
#right_nav ul li { list-style-type:none; float:left;}
#nav_1 { width: 250px; height:160px; background-color:#33CCCC; margin: 0px 0 0 5px; position:absolute;}
#nav_2 { width: 230px; height:400px; background-color:#66F; margin: -100px 0 0 260px; position:absolute;}
#nav_3 { width: 250px; height:100px; background-color:#693;  margin: 329px 0 0 447px; position:absolute;}
#nav_4 { width: 200px; height:200px; background-color:#CC9; margin: 200px 0 0 29px; position:absolute;}
#nav_5 { width: 190px; height:300px; background-color:#F9C; margin: 0 0 0 510px; position:absolute;}
#nav_6 { width: 250px; height:200px; background-color:#CF0; margin: 450px 0 0 450px; position:absolute;}
#nav_7 { width: 150px; height:200px; background-color:#F99; position:absolute; margin: 320px 0 0 250px;}
#nav_8 { width: 220px; height:200px; background-color:#693; position:absolute; margin: 420px 0 0 0;}
#nav_9 { width: 150px; height:100px; background-color:#693; position:absolute; margin: 540px 0 0 250px;}
.hover { width:50px; height:25px; background-color:#993300; }

jQuery：

$(document).ready(function() {     
    $("#right_nav ul li").hover(function(){     
        $('#right_nav ul li').addClass("hover");    
    },
    function(){    
        $('#right_nav ul li').removeClass("hover");     
    });
});

最初のリンクに.Hoverを追加できますが、他のリンクにマウスを合わせると機能しません

4

2 に答える 2

0

コードを見ると、ホバリングしたものではなく、すべての LI にクラスを追加していることがわかります。これを試して：

$(document).ready(function() {     
    $("#right_nav ul li").hover(function(){
        $(this).addClass("hover");    
    },     
    function(){    
        $(this).removeClass("hover");     
    });
});
于 2012-04-04T13:40:20.700 に答える
0

最後の CSS 行を次のように変更します。

#right_nav ul li:hover { width:50px; height:25px; background-color:#993300; }

したがって、それを行うためにJSは必要ありません。

これが実際にあなたが探しているものかどうかはわかりません。「アニメーション化」しようとしている「ボックス」は何/どこにありますか? これらの線に沿った何か：

$(document).ready(function() {     
    $("#right_nav ul li").hover(function(){
        //gets the hovered element's id
        var hovered_li_id = $(this).attr('id'); 

        //adds .hover to an element with id "hoverbox_nav_X" and then eventually animates it
        $('#hoverbox_'+hovered_li_id).addClass('hover').animate( /*...*/ );
    },
    function(){
        //removes .hover from wherever it was set and eventually resets any css the animation modified.
        $('.hover').removeClass('hover').css( /*...*/ );
    });
于 2012-04-04T13:56:08.113 に答える