admin管理员组

文章数量:1291104

Here is my script :

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

I want to show and hide divSubCategory on mainCategory hover. But it doesn't work. What should I add?

Here is my script :

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

I want to show and hide divSubCategory on mainCategory hover. But it doesn't work. What should I add?

  • javascript
  • jquery
  • show-hide
Share Improve this question edited Jun 29, 2012 at 8:00 Thomas Clayson 29.9k26 gold badges152 silver badges226 bronze badges asked Jun 29, 2012 at 7:57 cagincagin 5,93016 gold badges78 silver badges132 bronze badges
Add a ment  | 

4 Answers 4

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

Ok dude the problem is that you're using .html(). This copies the inner html (not the outer <div id="divSubCategory"></div> bit too... just the bit in the middle.

Because of this, when you do $('#divSubCategory').remove() its removing the actual div in the HTML, not the HTML you've moved into the div above.

Assuming you have display: none on #divSubCategory you will see the text from that div get appended to the first div, then when you mouse-out it will not go away (although the second (hidden) div will get deleted).

Anyway the way around this is to use clone(). I'll do a fiddle for you:

http://jsfiddle/fZZu5/1/

I also fixed your fades for you.

EDIT: This moves the div#divSubCategory into the div#mainCategory before showing it and then removes it pletely from there when you mouse-out - this is what I assumed you wanted to do from your code. Nicks just shows and hides it where it is. Depending on what you want, both these answers are correct. :)

This is the 100% working with your requirement:

Check this: http://jsfiddle/ZWqnk/8/

Wrap your code inside the document.ready() function

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

本文标签： javascriptHover div jqueryStack Overflow

版权声明：本文标题：javascript - Hover div jquery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741526105a2383473.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。