Смена картинки при наведении курсора

Здравствуйте. Третий день пытаюсь решить проблесу смены картинки при наведении на неё курсора. Нашёл в Инете такой рабочий код:

 <style>
   a.rollover {
    background: url(images/sun1.png); /* Путь к файлу с исходным рисунком  */
    display: block; /*  Рисунок как блочный элемент */
    width: 196px; /* Ширина рисунка */
    height: 183px; /*  Высота рисунка */
   }
   a.rollover:hover {
    background: url(images/sun2.png); /* Путь к файлу с заменяемым рисунком  */
   }
  </style>
  <p><a href="#" class="rollover"> </a></p>

Для одной картинки работает нормально, но мне нужно вставить на страницу несколько таких активных картинок с ссылками. Если просто менять адреса картинок, то на всех отражается только одна. Чтобы было понятно, прилагаю скан.

Что можно сделать, чтобы на одной странице отображалось несколько разных картинок со сменой изображения при наведении курсора?

А откуда ссылки берутся? Сервером генерируются или сайт статичный (то есть только HTML без серверных скриптов)?

Это скрин, если конечно вы не отпечатали страницу на принтере и не отсканировали сканером :slight_smile:

Ссылки на картинки просто копирую в виде http, статичные.

Ну в смысле не сами ссылки, а содержимое HTML. Это просто статичный HTML файл? Или серверным скриптом (PHP, …) генерируется?

Если статичный, то как вариант просто добавить уникальные атрибуты элементам и по ним селекторы писать (например id="myLink1" и #myLink1 вместо a.rollover, общие свойства типа display можно оставить в a.rollover).

Это статичный HTML файл

Вот пример: https://codepen.io/icetomcat/pen/OJNBEqw

<p class="rollover-box">
  <a href="#" class="rollover rollover_1"></a>
  <a href="#" class="rollover rollover_2"></a>
  <a href="#" class="rollover rollover_3"></a>
</p>
.rollover-box {
  display: flex;
  justify-content: center;
}
a.rollover {
  display: block;
  width: 196px;
  height: 183px;
  margin: 0 10px;
}
a.rollover.rollover_1 {
  background-color: rgba(255,0,0,1)
}
a.rollover.rollover_1:hover {
  background-color: rgba(255,0,255,1)
}
a.rollover.rollover_2 {
  background-color: rgba(0,255,0,1)
}
a.rollover.rollover_2:hover {
  background-color: rgba(0,255,255,1)
}
a.rollover.rollover_3 {
  background-color: rgba(0,0,255,1)
}
a.rollover.rollover_3:hover {
  background-color: rgba(255,255,0,1)
}

замените background-color на background со своими картинками

Вместо конкретных классов можно использовать псевдокласс :nth-child(<номер элемента>)

1 Симпатия

Кстати, для случаев когда нужна любая картинка-заглушка для примера, есть сервисы типа


https://fakeimg.pl/
https://dummyimage.com/
a.rollover.rollover_1 {
  background: url(https://picsum.photos/id/0/200/300);
}
a.rollover.rollover_1:hover {
  background: url(https://picsum.photos/id/1/200/300);
}
a.rollover.rollover_2 {
  background: url(https://picsum.photos/id/10/200/300);
}
a.rollover.rollover_2:hover {
  background: url(https://picsum.photos/id/11/200/300);
}

https://codepen.io/alexp11223/pen/yLORRxW

2 Симпатий

Прикольно, а то мне было лень искать картинки-заглушки

Никогда не понимал термин заглушка. Что под этим подразумевается?

Что-нибудь вместо реальных данных, например, когда их еще нет, а функциональность тестировать надо.

dummy, placeholder на англ.

https://www.lipsum.com