How to show the child div on mouse hover of parent div

Question

I have a number of parent divs (.parent_div), which each contain a child div (.hotqcontent) where I output data from my database using a loop.

The following is my current markup:

<div class="content">
  <div class="parent_div">
    <div class="hotqcontent">
      content of first div goes here...
    </div>
    <hr>
  </div>
  <div class="parent_div">
    <div class="hotqcontent">
      content of second div goes here...
    </div>
    <hr>
  </div>
  <div class="parent_div">
    <div class="hotqcontent">
      content of third div goes here...
    </div>
    <hr>
  </div>
  <div class="parent_div">
    <div class="hotqcontent">
      content of fourth div goes here...
    </div>
    <hr>
  </div>
</div>

What I would like to achieve is when a user hovers / mouseovers a parent div, the contents of the child div contained within should be revealed.

To achieve this I wrote the following jQuery script but it doesn't appear to be working. It's not even showing the alert!

<script> 
$(document).ready(function() {
  $(function() {
    $('.parent_div').hover(function() {
      alert("hello");
      $('.hotqcontent').toggle();
    });
  });
}); 
</script>

How can I modify or replace my existing code to achieve the desired output?

Answer 1

If you want pure CSS than you can do it like this....

In the CSS below, on initialization/page load, I am hiding child element using display: none; and then on hover of the parent element, say having a class parent_div , I use display: block; to unhide the element.

.hotqcontent {
   display: none;
   /* I assume you'll need display: none; on initialization */ 
}

.parent_div:hover .hotqcontent { 
   /* This selector will apply styles to hotqcontent when parent_div will be hovered */
   display: block;
   /* Other styles goes here */
}

Demo

Answer 2

Try this

$(document).ready(function() {
  $('.parent_div').hover(function() { 
    alert("hello");
    $(this).find('.hotqcontent').toggle(); 
  });
});

Or

$(function() {
  $('.parent_div').hover(function() { 
    alert("hello");
    $(this).find('.hotqcontent').toggle(); 
  });
});

Answer 3

你可以用css，

.parent_div:hover .hotqcontent {display:block;}

Answer 4

This can be done with pure css (I've added a couple of bits in just to make it a bit neater for the JSFIDDLE):

.parent_div {
    height: 50px;
    background-color:#ff0000;
    margin-top: 10px;
}

.parent_div .hotqcontent {
    display: none;
}

.parent_div:hover .hotqcontent {
    display:block;
}

This will ensure that your site still functions in the same way if users have Javascript disabled.

Demonstration: http://jsfiddle.net/jezzipin/LDchj/

Answer 5

you don't need document.ready function inside document.ready ..

try this

  $(function() {  //<--this is shorthand for document.ready
        $('.parent_div').hover(function() { 
             alert("hello");
             $(this).find('.hotqcontent').toggle(); 
             //or
            $(this).children().toggle(); 
       });
    });

and yes your code will toggle all div with class hotqcontent ..(which i think you don't need this) anyways if you want to toggle that particular div then use this reference to toggle that particular div

updated

you can use on delegated event for dynamically generated elements

$(function() {  //<--this is shorthand for document.ready
        $('.content').on('mouseenter','.parent_div',function() { 
             alert("hello");
             $(this).find('.hotqcontent').toggle(); 
             //or
            $(this).children().toggle(); 
       });
    });

Answer 6

$(document).ready(function(){
    $('.parent_div').on('mouseover',function(){
        $(this).children('.hotqcontent').show();
    }).on('mouseout',function(){
        $(this).children('.hotqcontent').hide();
    });;
});

JSFIDDLE

Answer 7

With .hotqcontent you are selecting every element with this class. But you want to select only the .hotqcontent element underneath the parent.

$('.hotqcontent', this).toggle();

Answer 8

you can try this:

jQuery(document).ready(function() {
  jQuery("div.hotqcontent").css('display','none');
  jQuery("div.parent_div").each(function(){
    jQuery(this).hover(function(){
        jQuery(this).children("div.hotqcontent").show(200);
    }, function(){
        jQuery(this).children("div.hotqcontent").hide(200);
    });
  });
});