0

Представим что есть один главный блок, и ниже пару блоков поменьше. В них лежат изображения.

.main>img
   .small>img
   .small>img
   .small>img
   .small>img

Задача в том, что бы при наведении на маленькие блоки, их img передавался на главный, и там уже транслировался. Спасибо.

1 ответ 1

0

$('.small-img').hover(function() {
  document.getElementById('big-img').src = this.src;
});
$('.small-img').mouseout(function() {
  document.getElementById('big-img').src = 'https://i.ytimg.com/vi/mK72EwuxZAU/hqdefault.jpg';
});
.big-block {
  width: 200px;
  height: 200px;
}

#big-img {
  width: 200px;
  height: 200px;
}

.small-block {
  width: 200px;
  height: 100px;
}

.small-img {
  width: 100px;
  height: 100px;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big-block">
  <img id="big-img" src="https://i.ytimg.com/vi/mK72EwuxZAU/hqdefault.jpg" />
</div>
<div class="small-block">
  <img class="small-img" src="https://cs8.pikabu.ru/post_img/big/2016/05/09/11/1462820965116271616.jpg" />
  <img class="small-img" src="https://www.meme-arsenal.com/memes/876041c5669352bb985e3a11eda018b7.jpg" />
</div>

1
  • Я тебе благодарен, искреннее спасибо. 15 мая 2018 в 9:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.