0

ユーザーのマウスオーバーとマウスアウトとしてリストに各divを個別に表示しようとしています。表示されたdivにもホバーし、終了時にスライドアップできるようにしたい..

ここに私のhttp://jsfiddle.net/AZhgk/があります

<div id="left_aside">

    <ul id="menu_seo" class="menu">
        <li id="menu-seo"><span class="arrowout1"></span>SEO</li>
        <div class="menu-seo-desc"></div>
        <li id="menu-siteaudits"><span class="arrowout2"></span><a href="#">Site Audits</a></li>
        <div class="menu-seo-desc"></div>
        <li id="menu-linkbuilding"><span class="arrowout3"></span><a href="#">Link-Building</a></li>
        <div class="menu-seo-desc"></div>
        <li id="menu-localseo"><span class="arrowout4"></span><a href="#">Local SEO</a></li>
        <div class="menu-seo-desc"></div>
    </ul>
    <script>
    $(document).ready(function(){
    var menu_seo = $("menu_seo");

        menu_seo.mouseover(function(){
             $(".menu-seo-desc").slideDown(300);
        });
    menu_seo.mouseout(function(){
             $(".menu-seo-desc").slideUp(300).end();
        });
 });
    </script>
</div>

任意の提案をいただければ幸いです!

4

2 に答える 2

2

このようにしてみてください：

<div id="left_aside">

    <ul id="menu_seo" class="menu">
        <li id="menu-seo" class="menu-seo"><span class="arrowout1"></span>SEO
        <div class="menu-seo-desc"></div>
            </li>
        <li id="menu-siteaudits" class="menu-seo"><span class="arrowout2"></span><a href="#">Site Audits</a>
        <div class="menu-seo-desc"></div>
            </li>
        <li id="menu-linkbuilding" class="menu-seo"><span class="arrowout3"></span><a href="#">Link-Building</a>
        <div class="menu-seo-desc"></div>
            </li>
        <li id="menu-localseo" class="menu-seo"><span class="arrowout4"></span><a href="#">Local SEO</a>
        <div class="menu-seo-desc"></div>
            </li>
    </ul>

とjquery

 $(".menu-seo").hover(function(){
              $(this).find(".menu-seo-desc").slideDown(300);
        },function(){
              $(this).find(".menu-seo-desc").slideUp(300).end();
        });



$(".menu-seo-desc").hover(function(){
              $(this).show();
        },function(){
              $(this).slideUp(300).end();
        }
                       );
于 2012-12-10T06:02:32.903 に答える
0

以下のコードを試してください

        $("#menu-seo").mouseover(function(){
              $(this).next().slideDown(300);
        });

        $("#menu-seo").mouseout(function(){
              $(this).next().slideUp(300).end();
        });

http://jsfiddle.net/AZhgk/6/

于 2012-12-10T06:03:30.290 に答える