title: I am trying to show an element on mouse over specific element
body: <p>Here is jQuery function when I am using this function it is applying all div with class <code>.check</code> and I want to apply only hover div not all.</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
      $(document).ready(function(){
          $('.pop').hover(function(){
              $('.check').animate({opacity: 'show'});
          }),
          $('.pop').mouseout(function(){
              $('.check').animate({opacity: 'hide'});
          })
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is html code of function #pop is parent and it's child .check
      
          
          
      </p>
  
  <pre><code>&lt;div class="pop"&gt;
      &lt;div class="check"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="pop"&gt;
      &lt;div class="check"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is css code  </p>
  
  <pre><code>.pop {
      clear:both;
      float:left;
      margin-bottom:20px;
      width:100px;
      height:100px;
      border:solid 1px green;
      position:relative;
  }
  
  .check {
      background:red;
      position:absolute;
      width:100px;
      height:100px;
      display:none;
      top:0;
      left:0;
  }
  </code></pre>
  
  <p>When I am using this code jQuery function applying all. Check div and I want apply only one div. Check only on hover</p>