Як міняти картинку при наведенні курсору миші

Відео: Як створити ефект плавної зміни зображення при наведенні курсору мишки

Я думаю, що Ви часто зустрічали на різних сайтах, коли Ви наводили мишкою на якусь картинку, і вона змінювалася. Найпростіший приклад - це наведення курсору миші на кнопку. Припустимо, після цього вона змінювала колір, як би стаючи активною. Ось про те, як міняти картинку при наведенні курсору миші, Ви дізнаєтеся з цієї статті.

Багато, звичайно, будуть робити це на jаvascript, хоча це зовсім нерозумно. Такі речі робляться за допомогою CSS і псевдоелемента hover. Давайте з Вами поставимо завдання.

Відео: © ✎Скріпт зміни картинки при наведенні курсору © ✎

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

HTML-код дуже простий:

Відео: 05 :. CSS. Пожвавлення сайту. Зміни кольору при наведенні курсору миші

class="Img"gt;

Тепер CSS-код:

Відео: Оформлення windows. Змінити курсор миші простіше простого. [частина 1]

.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 просто не відобразиться, тому не забувайте про те, що потрібно вказувати безпосередньо ширину і висоту, і вони повинні збігатися з шириною і висотою зображення, яке Ви подтсавляете в блок.

Даний спосіб є класичним, який постійно використовується для створення динамічних ефектів без використання jаvascript, думаю, що Ви будете його використовувати ще не раз.

Повний курс по HTML, CSS і по верстці сайтів: https://srs.myrusakov.ru/makeup

Поділися в соціальних мережах:

Схожі