CODEWITHSUNDEEP
jquery
Shahid Karimi
Shahid Karimi

Reputation: 4357

Jquery getting child div within a div

I have a css div and within that div another div exists. How can I get the child div while the mouse hovers over the parent div? As here:

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

When the mouse gets over the parent div, I want the child div to be displayed.

Upvotes: 7

Views: 28552

Answers (4)

William Niu
William Niu

Reputation: 15853

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

Upvotes: 0

R&#233;j&#244;me
R&#233;j&#244;me

Reputation: 1484

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

Upvotes: 0

Alnitak
Alnitak

Reputation: 339816

This works:

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

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

Example at http://jsfiddle.net/4kMuD/, although that uses IDs rather than classes for the selector.

I've assumed (although you didn't say) that you want the child div to disappear again when you're no longer hovering over the parent.

Upvotes: 11

chris
chris

Reputation: 505

Something like this?

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

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

Upvotes: 0

Related Questions