Помогите пожалуйста с такой задачей. Есть контейнер с изображениями и кратким описанием объекта. В этом контейнере 3 изображения, которые меняются при наведении на определенный div. Таких контейнеров около 100 шт.
Смену изображений реализовал, но при наведении на div сменяются изображения во всех контейнерах. Помогите сделать так, чтобы менялось только у того на который наводишь. Эту идею подсмотрел здесь
https://www.kufar.by
Фрагмент кода html, js + скрины прилагаю.
<div class="flat_object_0">
<div class="price f14px white">1 400 000 р.</div>
<div class="switch_1"></div>
<div class="switch_2"></div>
<div class="switch_3"></div>
<div class="foto">
<img src="<images/flat/object/object_1.png" class="foto_1" alt="foto_1">
<img src="<images/flat/object/object_2.png" class="foto_2" alt="foto_2">
<img src="<images/flat/object/object_3.png" class="foto_3" alt="foto_3">
</div>
<div class="place f12px ">
<img src="<images/slider_sale/icon_place.png" class="icon_place">3-комнатная квартира</div>
<div class="location f12px">
<img src="<images/slider_sale/icon_location.png" class="icon_location">
г. Сосновоборск, Куйбышева 24-19</div>
<a href="#" class="botton_object f18px white aligner">Посмотреть</a>
</div>
<div class="flat_object_01">
<div class="price f14px white">1 400 000 р.</div>
<div class="switch_1"></div>
<div class="switch_2"></div>
<div class="switch_3"></div>
<div class="foto">
<img src="<images/flat/object/object_1.png" class="foto_1" alt="foto_1">
<img src="<images/flat/object/object_2.png" class="foto_2" alt="foto_2">
<img src="<images/flat/object/object_3.png" class="foto_3" alt="foto_3">
</div>
<div class="place f12px ">
<img src="<images/slider_sale/icon_place.png" class="icon_place">
3-комнатная квартира</div>
<div class="location f12px">
<img src="<images/slider_sale/icon_location.png" class="icon_location">
г. Сосновоборск, Куйбышева 24-19
</div>
<a href="#" class="botton_object f18px white aligner">Посмотреть</a>
</div>
jQuery(document).ready(function(){
jQuery(".switch_1, .switch_2, .switch_3").hover(
function() {
jQuery( this ).addClass('active');
}, function() {
jQuery( this ).removeClass('active');
}
);
});
jQuery('.switch_1').hover(function(){
jQuery('.foto_1').addClass('active');
jQuery('.foto_2, .foto_3').removeClass('active');
});
jQuery('.switch_2').hover(function(){
jQuery('.foto_2').addClass('active');
jQuery('.foto_1, .foto_3').removeClass('active');
});
jQuery('.switch_3').hover(function(){
jQuery('.foto_3').addClass('active');
jQuery('.foto_1, .foto_2').removeClass('active');
});