Fatal编程技术网

Javascript Hover div jquery

javascript jquery

Javascript Hover div jquery,javascript,jquery,show-hide,Javascript,Jquery,Show Hide,这是我的剧本： <body> <div id ="mainCategory" class='fade'> Category</div> <div id="divSubCategory"> Category1 <br /> Category2 </div> <script type="text/javascript">

这是我的剧本：

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


类别
类别1


类别2
$（“div”）。悬停(
函数（）{
$（this.append（$（“#divSubCategory”）.html（））；
},
函数（）{
$（“#divSubCategory”）.remove（）；
}
);
$（“#divSubCategory.fade”）.hover（函数（）{$（this.fadeOut（100）；$（this.fadeIn（500）；}）；
我想在mainCategory悬停时显示和隐藏divSubCategory。但它不起作用。我应该添加什么？

将代码包装到document.ready（）函数中

好的，伙计，问题是您使用的是
.html（）
。这复制了内部HTML（不是外部<代码> <代码>位……只是中间的位。

因此，当您执行
$（“#divSubCategory”）.remove（）
时，它将删除HTML中的实际div，而不是您移动到上面div中的HTML

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

无论如何，解决这个问题的方法是使用
clone（）
。我将为您做一个小提琴：

我还为你修复了淡色

编辑：这会在显示之前将
div#div子类别
移动到
div#main类别
中，然后当鼠标移出时将其完全移除-这是我假设您想从代码中执行的操作。Nicks只会显示并隐藏它所在的位置。根据您的需要，这两个答案都是正确的。：）

这是100%满足您的要求：

检查此项：

这应该不是问题，因为代码是在HTML之后编写的。@ThomasClayson，我有HTML标记，只是没有到达这里。@cagin是的，我想，但我的意思是你不需要使用
$（document）.ready（function（）{…}）（或者这不是您的问题），因为javascript在HTML之后。因此HTML在脚本之前进入浏览器，一切正常。但是，您可能应该使用
$（document）.ready（）
，以防您想将脚本移动到外部文件中或某些文件工作不正常。它可以工作，但我想在鼠标离开主类别时隐藏子类别。当鼠标移到主类别上时，这会隐藏子类别。问题是
div#divSubCategory
未包含在
div#maincegory
中，因此当您尝试将鼠标移到
div#divSubCategory
上时，该div将隐藏。如果这是一个菜单系统（例如），那么这将不适用于您，因为您需要在鼠标滑过它时显示
div#divSubCategory
。谢谢，忘了这些：）

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



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