Показать сообщение отдельно
  #1 (permalink)  
Старый 28.12.2017, 19:04
Аспирант
Отправить личное сообщение для Noonf Посмотреть профиль Найти все сообщения от Noonf
 
Регистрация: 26.11.2017
Сообщений: 38

Смена изображений при наведении в отдельных контейнерах
Помогите пожалуйста с такой задачей. Есть контейнер с изображениями и кратким описанием объекта. В этом контейнере 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');
});
Изображения:
Тип файла: jpg Безымянный1.jpg (24.8 Кб, 1 просмотров)
Тип файла: jpg Безымянный.jpg (23.2 Кб, 1 просмотров)
Ответить с цитированием