title: How to show the child div on mouse hover of parent div
body: <p>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. </p>
  
  <p>The following is my current markup:</p>
  
  <pre><code>&lt;div class="content"&gt;
    &lt;div class="parent_div"&gt;
      &lt;div class="hotqcontent"&gt;
        content of first div goes here...
      &lt;/div&gt;
      &lt;hr&gt;
    &lt;/div&gt;
    &lt;div class="parent_div"&gt;
      &lt;div class="hotqcontent"&gt;
        content of second div goes here...
      &lt;/div&gt;
      &lt;hr&gt;
    &lt;/div&gt;
    &lt;div class="parent_div"&gt;
      &lt;div class="hotqcontent"&gt;
        content of third div goes here...
      &lt;/div&gt;
      &lt;hr&gt;
    &lt;/div&gt;
    &lt;div class="parent_div"&gt;
      &lt;div class="hotqcontent"&gt;
        content of fourth div goes here...
      &lt;/div&gt;
      &lt;hr&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>To achieve this I wrote the following jQuery script but it doesn't appear to be working. It's not even showing the alert!</p>
  
  <pre><code>&lt;script&gt; 
  $(document).ready(function() {
    $(function() {
      $('.parent_div').hover(function() {
        alert("hello");
        $('.hotqcontent').toggle();
      });
    });
  }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I modify or replace my existing code to achieve the desired output?</p>