Ви тут: Головна - CSS - CSS Основи - Як міняти картинку при наведенні курсору миші
Я думаю, що Ви часто зустрічали на різних сайтах, коли Ви наводили мишкою на якусь картинку, і вона змінювалася. Найпростіший приклад - це наведення курсору миші на кнопку. Припустимо, після цього вона змінювала колір, як би стаючи активною. Ось про те, як змінювати картинку при наведенні курсору миші. Ви дізнаєтеся з цієї статті.
У нас є картинка. Ми хочемо, щоб при наведенні на неї курсора миші, вона змінювалася. Більш того, ми хочемо, щоб ще з'являлася червона рамка навколо картинки.
HTML-код дуже простий:
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 просто не відобразиться, тому не забувайте про те, що потрібно вказувати безпосередньо ширину і висоту, і вони повинні збігатися з шириною і висотою зображення, яке Ви подтсавляете в блок.
page.html - це приклад назви сторінки, у Вас вона може бути index.html, about.html або page_1.html. Ви повинні його замінити на свою назву, тоді і не буде 404.
Як я не здогадався! Дякую за науку. Буду продовжувати вивчення вашого курсу "Створення сайту від А до Я" Ваша чуйність і готовність допомогти викликає особливу повагу.
Можна зробити "a" блоковим елементом, display: block; А потім задавати йому background у вигляді картинки, при a: hover background ставити інший.
Перевірте будь ласка мій код) ну схема така створив файл з розширенням КСС вказав шлях до нього через лінк в Хеді картинки попридумували вказав ширину висоту як в зображенні, але
просто так не делать) в тезі якщо вставляю що тоді з'являється картинка, по іншому не відображається дивЗнову ж і тут може бути помилка в href. Використовуйте firebug.
Прекрасно посилається хріф, якщо код виглядає так
, то починає працювати тільки загороджує інша картинка) і мені не зрозуміло як відобразити цей порожній див що б працювало, інакше не відображається, тобто все прекрасно працює не можу задати рамки нормально. imgПрогалини не можна використовувати в назві зображень. І шлях, якщо файл стилів лежить не в тій же директорії, що зображення, повинен бути зовсім іншим.
Михайло, підкажи, будь ласка. Цілий день б'юся над цією зміною картинки в меню, а нічого не виходить. Ось приклад:
ось стилі: #menuМожливо, шлях до картинки вказано невірно. І ще незрозуміло, навіщо вказувати фон у p, а потім у a: hover, треба вказувати і там, і там
, або .
Шлях вказано вірно. Перевіряв кілька разів. Останній раз, щоб вже напевно, вказав місцезнаходження файлу через контекстне меню Dreamweaver. Вказував фон і тільки для Р: #menu p<>. #menu p: hover<>, і тільки для А: #menu a<>. #menu a: hover<>, змін немає.
знайшов відповідь: помилка всього в одному прогалині #menu p: hover. Виправив на #menu p: hover і все запрацювало