2

这是我的脚本：

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

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

4

4 回答 4

8 
$(document).ready(function(){
    $('#mainCategory').bind('mouseenter', function() {
        $('#divSubCategory').fadeIn();
    });
    $('#mainCategory').bind('mouseleave', function() {
        $('#divSubCategory').fadeOut();
    });
});
于 2012-06-29T08:02:59.677 回答
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，然后在鼠标移出时将其从那里完全删除-这是我假设您想从代码中执行的操作。尼克斯只是将它显示并隐藏在它所在的位置。根据您的需要，这两个答案都是正确的。:)

于 2012-06-29T08:08:10.503 回答
1

这是 100% 满足您的要求：

检查这个：http: //jsfiddle.net/ZWqnk/8/

于 2012-06-29T08:19:43.663 回答
-3

将代码包装在 document.ready() 函数中

$(document).ready(function(){
   // Your code here
 });
于 2012-06-29T07:59:17.467 回答