1

Есть html структура.

<div class="service">
  <h2>text</h2>
  <p>text</p>
  <img src="images/icon.png">
</div>
<div class="service">
  <h2>text</h2>
  <p>text</p>
  <img src="images/icon1.png">
</div>
<div class="service">
  <h2>text</h2>
  <p>text</p>
  <img src="images/icon2.png">
</div>
<div class="service">
  <h2>text</h2>
  <p>text</p>
  <img src="images/icon3.png">
</div>

Необходимо менять изображение в том блоке, на который наводится мышь. Приблизительно планировал делать так (на примере первого блока div):

$(".service").mouseover(function(){
    var img = document.getElementById("id");
    img.setAttribute("src", "images/iconNEW.png");
});
$(".service").mouseout(function(){
    var img = document.getElementById("id");
    img.setAttribute("src", "images/icon.png");
});

Но для этого придётся каждому изображению и divy присвоить id. И для 4 блоков получится 8 функций. А если их будет еще больше, вообщем ужас. Как это можно оптимизировать? Либо как то через this, либо цикл, toggle, либо еще какой-то вариант..Подскажите, пожалуйста, как лучше это реализовать?

2 ответа 2

3

Вот так можно без скриптов обойтись:

.service {
  display: inline-block;
  position: relative;
  width: 100px;
  background-color: wheat;
  height: 160px;
  padding: 10px;
  cursor: pointer;
}

.service img{
  position: absolute;
  left: 35px;
}

.service img:last-child {
  opacity: 0;
  transition: 500ms;
}

.service:hover img:last-child {
  opacity: 1;
}
<div class="service">
  <h2>text 1</h2>
  <p>text 1</p>
  <img src="https://picsum.photos/id/20/50/50">
  <img src="https://picsum.photos/id/21/50/50">
</div>
<div class="service">
  <h2>text 2</h2>
  <p>text 2</p>
  <img src="https://picsum.photos/id/30/50/50">
  <img src="https://picsum.photos/id/31/50/50">
</div>
<div class="service">
  <h2>text 3</h2>
  <p>text 3</p>
  <img src="https://picsum.photos/id/40/50/50">
  <img src="https://picsum.photos/id/41/50/50">
</div>
<div class="service">
  <h2>text 4</h2>
  <p>text 4</p>
  <img src="https://picsum.photos/id/50/50/50">
  <img src="https://picsum.photos/id/51/50/50">
</div>

0
.service{
    //стили
}
img{
    width:0px;
    height:0px;
}
.service:hover img{
    width:100px;  /*нужная ширина , 
    например 100px */
    height:100px; /*нужная высота , к 
    примеру 100px */
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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