Jquery在div中获取子div

时间:2011-03-11 12:57:05

标签: jquery

我有一个css div,在那个div中存在另一个div。当鼠标悬停在父div上时,如何获得子div?在这里:

<div class="parent">
  <div class="child">
  </div>
</div>

当鼠标越过父div时,我希望显示子div。

4 个答案:

答案 0 :(得分:7)

这有效:

$('.child').hide();   // or $('.parent').children().hide();

$('.parent').hover(
    function() { $(this).children('div').show() },
    function() { $(this).children('div').hide() }
);

http://jsfiddle.net/4kMuD/处的示例,虽然它使用ID而不是选择器的类。

我假设(虽然您没有说)当您不再盘旋在父母身上时,您希望子div再次消失。

答案 1 :(得分:0)

这样的东西?

  <div id="div1">
        div1
        <div id="div2" style="display:none;">div2</div>
    </div>

 $(function(){
        $("#div1").hover(function(){
            $("#div2").show();
        }, function(){
            $("#div2").hide();   
        });
    });

答案 2 :(得分:0)

$('div.parent').bind('hover', 
   function(e) { $('div.child', this).show() },
   function(e) { $('div.child', this).hide() },
);

答案 3 :(得分:0)

<html>
  <head>
    <title>Tests</title>
    <script src="jquery.js"></script>
    <script>
    $(document).ready(function(){
        $('#parent').mouseover(function() {
            $('#child').css('display', 'block');
        })
    });
    </script>
    <style>
        #parent {width: 100px; height: 100px; background-color: yellow;}
        #child { display:none; }
    </style>
  </head>
  <body>
        <div id="parent">
            <div id="child">Content</div>
        </div>
  </body>
</html>