Замена картинки при наведении на нее мышкой

Допустим, после этого она меняла цвет, как бы делаясь активной. Вначале разберём, как делается собственно сам эффект. Наведение мыши на элемент с определённым классом событие наведения мыши на элемент с определённым классом. Многие из вас ещё, независимо от знаний вёрстки и программирования, сталкивались с заменой изображения при наведении на него.

Давайте с вами поставим задачу.

Здесь нам понадобится только одна картинка.

При наведении на картинку, она меняется на другую, принцип действий очень прост и понятен.

На самом деле, изменение цвета изображения при наведение курсора - это замена одного изображения другим, идентичным, но иного цвета.

При наведении происходит ее смещение и показывается другая часть.

Для этого нам нужно, две картинки как вы уже поняли, одна активная, а другая пассивная.

Мы хотим, чтобы при наведении на неё курсора мыши, она изменялась.

Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется.

В результате картинка менялась, возможно даже в размерах и форме.

Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания.

Второй вариант, когда при наведении на картинку, она меняется.

Смена картинки будет происходить, только без эффектов.

Но в этом случае, скорее всего используются скрипты.