Как сделать jQuery mouseenter влиять только на один DIV

Question

Я новичок в jquery. Я создаю портфолио изображений. В основном у меня есть 2 класса div. И внутри основного класса у меня есть образ. Когда я вхожу с помощью мыши на основной DIV, я получаю второй div для анимации. Он работает хорошо, но когда я копирую основное DIV 2 или более раз, на MOUSEENTER запускается каждый DIV. Как я могу сделать так, чтобы только DIV, на который мышь включалась, и что остальные остаются незатронутыми. Спасибо. Я дам вам оба кода jquery и html. И укажите образ моей проблемы.

JQuery:

$(document).ready(function() { 
    $(".main").mouseenter(function() { 
     $(".blue").animate({ 
      left: '0px', 
      opacity: '0.6', 

     }, "slow"); 
    }) 

    $(".main").mouseleave(function() { 
     $(".blue").animate({ 
      left: '-250px', 
      opacity: '1.0', 

     }, "slow"); 
    }); 
}); 

HTML:

<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;"> 
    <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;"> 
    </div> 

    <a href="#"> 
     <img src="uploads/windows.jpg" alt="windows"> 
    </a> 
</div> 

The problem image

Answer 1

Использование hover() объединить оба обработчика события. Также установить this контекст для отображения .blue div внутри зависшего элемента. Используйте stop() для очистки очереди анимации.

$(document).ready(function() { 
 
    $(".main").hover(function() { 
 
    $(".blue", this).stop().animate({ 
 
     left: '0px', 
 
     opacity: '0.6', 
 
    }, "slow"); 
 
    }, function() { 
 
    $(".blue", this).stop().animate({ 
 
     left: '-250px', 
 
     opacity: '1.0', 
 
    }, "slow"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;"> 
 
    <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;"> 
 
    </div> 
 
    <a href="#"> 
 
    <img src="uploads/windows.jpg" alt="windows"> 
 
    </a> 
 
</div> 
 
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;"> 
 
    <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;"> 
 
    </div> 
 
    <a href="#"> 
 
    <img src="uploads/windows.jpg" alt="windows"> 
 
    </a> 
 
</div>

Answer 2

Вы можете использовать .find() или передать контекст, чтобы найти blue элемент по отношению к зависающий элемент

$(document).ready(function() { 
 
    $(".main").mouseenter(function() { 
 
    $(this).find(".blue").stop().animate({ 
 
     left: '0px', 
 
     opacity: '0.6', 
 
    }, "slow"); 
 

 
    }) 
 

 
    $(".main").mouseleave(function() { 
 
    $(this).find(".blue").stop().animate({ 
 
     left: '-250px', 
 
     opacity: '1.0', 
 
    }, "slow"); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;"> 
 
    <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;"> 
 
    </div> 
 
    <a href="#"> 
 
    <img src="uploads/windows.jpg" alt="windows"> 
 
    </a> 
 
</div> 
 
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;"> 
 
    <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;"> 
 
    </div> 
 
    <a href="#"> 
 
    <img src="uploads/windows.jpg" alt="windows"> 
 
    </a> 
 
</div> 
 
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;"> 
 
    <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;"> 
 
    </div> 
 
    <a href="#"> 
 
    <img src="uploads/windows.jpg" alt="windows"> 
 
    </a> 
 
</div>