Question

我试图让每个div在我的列表中单独显示为用户mouseovers和mouseout，我希望能够将鼠标悬停在显示的div上，然后在退出时滑动..

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

任何建议都将不胜感激！

Answer 1

尝试这样：

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

Answer 2

尝试以下代码

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

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

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

在列表项Jquery下面显示div

2 个答案: