Как изменить атрибут src у img при наведении

120
31 марта 2021, 11:20

Как изменить атрибут src у img при наведении?Eсть-ли варианты реализации на чистом css?Если нет - то и js подойдёт.

Answer 1

Для <img />нужен js. Изображение при наведении можно задать в data атрибут, в котором будет лежать ссылка на второе изображение, а чтобы постоянно не обращаться к dom, можно хранить оба src в замыкании:

function createHoverImage() { 
  document.querySelectorAll('[data-hover-src]').forEach((img) => { 
    const src = img.getAttribute('src'); 
    const srcH = img.getAttribute('data-hover-src'); 
 
    img.addEventListener('mouseover', () => {img.src = srcH;}) 
    img.addEventListener('mouseout', () => {img.src = src;}) 
  }); 
} 
 
createHoverImage();
<img id="img" src="https://via.placeholder.com/150/0000FF" data-hover-src="https://via.placeholder.com/150/FF0000" /> 
 
<img id="img" src="https://via.placeholder.com/150/FFFF00" data-hover-src="https://via.placeholder.com/150/000000" />

Answer 2

Через css можно при помощи background у элемента:

div { 
  position:absolute; 
  width:100px; 
  height:100px; 
  background: url('https://picsum.photos/id/2/100/100'); 
} 
div:hover { 
  background: url('https://picsum.photos/id/1/100/100'); 
}
<div></div>

если все же нужен img, то через js

img.addEventListener('mouseover', e => img.src = "https://picsum.photos/id/2/100/100"); 
img.addEventListener('mouseout', e => img.src = "https://picsum.photos/id/1/100/100");
<img id="img" src="https://picsum.photos/id/1/100/100" />

Answer 3

Пример с content: url(...); :

img { 
  max-width: 100%; 
} 
 
img:hover { 
  content: url(https://images.unsplash.com/photo-1562849227-64f2b4d72b9c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60); 
}
<img src="https://images.unsplash.com/photo-1558981408-db0ecd8a1ee4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt="">

Но лучше все же через background или js.

READ ALSO
Удаление конкретных пар элментов из массива
javascript

Удаление конкретных пар элментов из массива

 112
помогите переписать 2 функции в одну [закрыт]
javascript

помогите переписать 2 функции в одну [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

 106
как изменить titlle через vue
javascript

как изменить titlle через vue

при загрузки сайта title меняется

 105
Увеличить длину массива
javascript

Увеличить длину массива

Необходимо увеличить длину массива, дублируя элементы, до тех пор, пока его длина не станет требуемой

 110