Question

这是我的剧本：

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

我想在主要类别悬停上显示和隐藏div SubCategory。但它不起作用。我应该添加什么？

Answer 1

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

Answer 2

好的，问题是您正在使用.html()。这会复制内部html（不是外部<div id="divSubCategory"></div>位...只是中间位。

正因为如此，当你$('#divSubCategory').remove()删除HTML中的实际div时，而不是移动到上面div中的HTML。

假设您display: none上有#divSubCategory，您会看到该div中的文本被附加到第一个div，然后当您鼠标移出时它不会消失（尽管第二个（隐藏） div将被删除）。

无论如何，解决这个问题的方法是使用clone()。我会为你做一个小提琴：

http://jsfiddle.net/fZZu5/1/

我也为你修好了。

编辑：这会将div#divSubCategory移动到div#mainCategory之前显示它，然后当你鼠标移出时将其从那里完全删除 - 这就是我认为你想从你的代码中做的事情。尼克斯只是展示并隐藏它的位置。根据您的需要，这两个答案都是正确的。：）

Answer 3

这是100％符合您的要求：

请检查：http://jsfiddle.net/ZWqnk/8/

Answer 4

将您的代码包装在document.ready（）函数

中

$(document).ready(function(){
   // Your code here
 });

悬停div jquery

4 个答案: