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 回答