title: fadeIn and fadeOut a children with jQuery when hovering
body: <p>I'm trying to fadeIn the div .description when I over the parent div .content. I have a couple of those item in my page, so I don't know how to implement the children() in my jQuery code. Right now, when I hover one .content, every .description are faded out.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div class="item"&gt;
      &lt;div class="content"&gt;
          &lt;div class="description"&gt;
              &lt;p&gt;
                  &lt;span&gt;Super Garfield&lt;/span&gt;&lt;br /&gt;
                  &lt;span&gt;by myself&lt;/span&gt;
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="image" style="background-image: url('style/img/body-item-sample1.png')"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="view"&gt;
          1234
      &lt;/div&gt;
      &lt;div class="like"&gt;
          1234
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the jQuery:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
          $(".content").hover(function(){
              $(".description").fadeIn(100); // This should set the opacity to 100% on hover
          },function(){
              $(".description").fadeOut(100); // This should set the opacity back to 30% on mouseout
          });
      });
  &lt;/script&gt;
  </code></pre>