Hover на изображениях jquery

300

04 мая 2017, 14:20

После наведения мыши на одно изображение ховер эффект воспроизводиться и на всех остальных. Как сделать, чтобы ховер (белый блок с текстом "Project One") отображался только на той картинке, на которую я навел? Спасибо.

$(document).ready(function(){ 
  $('.caption').hide(); 
}); 
 
$(window).load(function(){ 
    //Блок с описанием 
    $('.img, .caption').mouseover( 
        function(){ 
            $(".caption").stop().show(300); 
        }).mouseout(function() { 
            $('.caption').stop().hide(300); 
        }); 
 
        $(this).addClass(".caption") 
    //Мышка на описании 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div class="portfolio"> 
        <div class="container"> 
          <div class="row"> 
            <div class="col-lg-6 col-lg-offset-3"> 
              <div class="portfolio-header"> 
                <h1>Portfolio</h1> 
                <p>We understand your requirment and provide quality works</p> 
              </div> 
            </div>   
          </div> 
          <div class="row"> 
            <div class="col-lg-4"> 
              <div class="thumbs"> 
                  <img src="imgs/portfolio/row1img1.png"/ class="img"> 
                  <div class="caption"> 
                      <div class="circle"><span>+</span></div> 
                      <span class="title">Project One</span> 
                  </div> 
              </div> 
            </div> 
             <div class="col-lg-4"> 
              <div class="thumbs"> 
                  <img src="imgs/portfolio/row1img2.png"/ class="img"> 
                  <div class="caption"> 
                      <div class="circle"><span>+</span></div> 
                      <span class="title">Project One</span> 
                  </div> 
              </div> 
            </div> 
            <div class="col-lg-4"> 
              <div class="thumbs"> 
                  <img src="imgs/portfolio/row1img3.png"/ class="img"> 
                  <div class="caption"> 
                      <div class="circle"><span>+</span></div> 
                      <span class="title">Project One</span> 
                  </div> 
              </div> 
            </div> 
          </div>         
        </div> 
      </div>

Answer 1

https://jsfiddle.net/e2cjnspv/2/

$('.caption').hide(); 
 
$('.img, .caption').mouseover( 
  function(){ 
    $(this).closest(".thumbs").find(".caption").stop().show(300); 
  }).mouseout(function() { 
    $('.caption').stop().hide(300); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="portfolio"> 
        <div class="container"> 
          <div class="row"> 
            <div class="col-lg-6 col-lg-offset-3"> 
              <div class="portfolio-header"> 
                <h1>Portfolio</h1> 
                <p>We understand your requirment and provide quality works</p> 
              </div> 
            </div>   
          </div> 
          <div class="row"> 
            <div class="col-lg-4"> 
              <div class="thumbs"> 
                  <img src="imgs/portfolio/row1img1.png"/ class="img"> 
                  <div class="caption"> 
                      <div class="circle"><span>+</span></div> 
                      <span class="title">Project One</span> 
                  </div> 
              </div> 
            </div> 
             <div class="col-lg-4"> 
              <div class="thumbs"> 
                  <img src="imgs/portfolio/row1img2.png"/ class="img"> 
                  <div class="caption"> 
                      <div class="circle"><span>+</span></div> 
                      <span class="title">Project One</span> 
                  </div> 
              </div> 
            </div> 
            <div class="col-lg-4"> 
              <div class="thumbs"> 
                  <img src="imgs/portfolio/row1img3.png"/ class="img"> 
                  <div class="caption"> 
                      <div class="circle"><span>+</span></div> 
                      <span class="title">Project One</span> 
                  </div> 
              </div> 
            </div> 
          </div>         
        </div> 
      </div>