悬停div jquery

cag*_*gin 2 javascript jquery show-hide

这是我的脚本:

  <body>
    <div id ="mainCategory" class='fade'>
        Category</div>
    <div id="divSubCategory">
        Category1
        <br />
        Category2
    </div>
    <script type="text/javascript">
        $("div").hover(
            function () {
                $(this).append($("#divSubCategory").html());
            },
            function () {
                $("#divSubCategory").remove();
            }
         );
        $("#divSubCategory.fade").hover(function () { $(this).fadeOut(100); $(this).fadeIn(500); });

    </script>
</body>
Run Code Online (Sandbox Code Playgroud)

我想在mainCategory悬停上显示和隐藏divSubCategory.但它不起作用.我应该添加什么?

Nic*_*ink 8

$(document).ready(function(){
    $('#mainCategory').bind('mouseenter', function() {
        $('#divSubCategory').fadeIn();
    });
    $('#mainCategory').bind('mouseleave', function() {
        $('#divSubCategory').fadeOut();
    });
});
Run Code Online (Sandbox Code Playgroud)