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

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

Многие, конечно, будут делать это на 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. думаю, что Вы будете его использовать ещё не раз.