title: Why are utilized all the elements when the mouse cursor is shown on only one element?
body: <p>I have a drop-down stripes whith title for posts.
  When the mouse cursor is shown on only one element - all elements become active. 
  Why it's happening, and how to make only one post was active.
  example:<a href="http://beardhouse.com.ua/" rel="nofollow">http://beardhouse.com.ua/</a></p>
  
  <pre><code>//post-description slide
  $(".contant").hover(function(){
  $(".post-description").css({
  
      'left': '-5px',
      '-webkit-transition-duration': '0.3s',
      '-moz-transition-duration': '0.3s',
      '-o-transition-duration': '0.3s',
      'transition-duration': '0.3s',
  });
  },function(){
  $(".post-description").css({
      'left': '-120px',
      '-webkit-transition-duration': '0.3s',
      '-moz-transition-duration': '0.3s',
      '-o-transition-duration': '0.3s',
      'transition-duration': '0.3s'
  });  
  });
  </code></pre>
  
  <p>==================================================================================
      
      </p>
  
  <pre><code>        &lt;?php if(have_posts()) : ?&gt; 
          &lt;?php while(have_posts()) : the_post(); ?&gt; 
  
                &lt;div class="col-lg-3"&gt;
                    &lt;div class="stripe_part"&gt;&lt;img src="http://beardhouse.com.ua/wp-content/themes/arbion/images/stripe_left.png"&gt;&lt;/div&gt;
  
                    &lt;div class="contant"&gt;
                     &lt;div class="post-description"&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;"&gt; &lt;?php the_title(); ?&gt; &lt;/a&gt;&lt;/div&gt;
                     &lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;img src="&lt;?php echo first_image() ?&gt;"title="&lt;?php the_title(); ?&gt;"  /&gt;&lt;/a&gt;&lt;/div&gt; &lt;!-- /take a first image from the post --&gt;           
                &lt;/div&gt;
  
          &lt;?php endwhile; ?&gt;
          &lt;?php endif; ?&gt;
  </code></pre>
  
  <p><br>
        </p>