Как менять картинку при наведении курсора мыши

Я думаю, что Вы часто встречали на различных сайтах, когда Вы наводили мышкой на какую-нибудь картинку, и она менялась. Самый простой пример — это наведение курсора мыши на кнопку. Допустим, после этого она меняла цвет, как бы делаясь активной. Вот о том, как менять картинку при наведении курсора мыши. Вы узнаете из этой статьи.

Многие, конечно, будут делать это на JavaScript. хотя это совершенно неразумно. Такие вещи делаются с помощью CSS и псевдоэлемента hover. Давайте с Вами поставим задачу.

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

HTML-код очень простой:

<div class=»img»></div>

Теперь CSS-код:

.img <

background: url(«image_1.jpg») no-repeat; // Подставляем картинку по умолчанию

height: 100px; // Высота картинки

width: 100px; // Ширина картинки

img:hover <

background: url(«image_2.jpg») no-repeat; // Подставляем ту картинку, которая будет при наведении курсора мыши

border: 2px solid #f00; // Устанавливаем красную рамку

height: 120px; // Высота новой картинки

width: 120px; // Ширина новой картинки

Ключевой ошибкой новичков является отсутствие свойств width и height. Без них пустой блок div просто не отобразится, поэтому не забывайте о том, что нужно указывать напрямую ширину и высоту, и они должны совпадать с шириной и высотой изображения, которое Вы подтсавляете в блок.

Данный способ является классическим, который постоянно используется для создания динамических эффектов без использования JavaScript. думаю, что Вы будете его использовать ещё не раз.