Смена изображения при наведении на другой объект

Мне нужно сделать так чтобы изображение в кнопке менялось при наведении на кнопку. Вот код:

<button class="followed-button">
    <img src="../img/heart.png" class="follow-img">
</button>

Ответы (1 шт):

Автор решения: SiRanWeb

Без JS можно сделать что-то такое

HTML:

<button class="followed-button">
  <img src="" class="default"/>
  <img src="" class="on-hover"/>
</button>

CSS:


.followed-button > .default {
  display: block; /* или другое нужное значение */
}

.followed-button > .on-hover {
  display: none;
}

.followed-button:hover > .on-hover {
  display: block; /* или другое нужное значение */
}

.followed-button:hover > .default {
  display: none;
}
→ Ссылка