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

i have number of parent divs (.parent_div), each contain child div (.hotqcontent) output data database using loop.

the following 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 achieve when user hovers / mouseovers parent div, contents of child div contained within should revealed.

to achieve wrote following jquery script doesn't appear working. it's not showing alert!

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

how can modify or replace existing code achieve desired output?

if want pure css can this....

in css below, on initialization/page load, hiding child element using display: none; , on hover of parent element, having class parent_div, use display: block; unhide element.

.hotqcontent {    display: none;    /* assume you'll need display: none; on initialization */  }  .parent_div:hover .hotqcontent {     /* selector apply styles hotqcontent when parent_div hovered */    display: block;    /* other styles goes here */ } 

demo