Как менять картинку при наведении CSS

Чтобы изменить картинку при наведении на нее курсора мыши в CSS, можно использовать псевдокласс :hover.

Например, если у нас есть изображение, которое мы хотим заменить на другое изображение при наведении на него курсора мыши, мы можем использовать следующий CSS-код:

.my-image {
  width: 200px;
  height: 200px;
  background-image: url('my-image1.jpg');
}

.my-image:hover {
  background-image: url('my-image2.jpg');
}

Здесь мы используем класс .my-image для элемента, который содержит первое изображение, которое мы хотим заменить на второе изображение при наведении на него курсора мыши.

С помощью свойства background-image мы устанавливаем первоначальное изображение в качестве фона элемента.

А затем мы добавляем псевдокласс :hover и устанавливаем второе изображение в качестве фона элемента. Когда курсор мыши наводится на элемент, его фон изменяется на второе изображение, а когда курсор убирается, он возвращается к первоначальному изображению.

Вы можете изменять свойства, помимо background-image, такие как background-color, color, border и другие, чтобы создавать разные эффекты при наведении на элемент.