Здрастуйте шановні читачі блогу webcodius! Часто отримую питання: як зробити так, щоб картинка на веб-сторінці змінювалася при наведенні курсору миші. Такий ефект зустрічається на багатьох сайтах і найпростіший приклад, це коли ви наводите курсор на якусь кнопку, а вона після цього змінює колір. Іноді для створення подібного ефекту застосовується JavaScript, але зазвичай достатньо одного CSS, особливо після появи третьої версії CSS. Далі у статті я розповім як міняти картинку при наведенні курсору мишіза допомогою лише одного CSS, розгляну кілька способів та різні ефекти.
Ефекти зміни елемента веб-сторінки при наведенні курсору миші часто називають hover-ефектами. Пов'язано це з тим, що при реалізації таких ефектів використовується , який визначає стиль елемента при наведенні курсора миші.
Спочатку розглянемо варіант простіше. Допустимо у Вас на сторінці вставлена картинка, як наведено нижче:
І допустимо вам необхідно змінювати її відображення при наведенні курсору миші. При вставці цього зображення до тега img додаємо атрибут class="animate1" , тоді html-код картинки буде виглядати приблизно так:
Для початку можна просто при наведенні курсору зробити картинку прозорою. За прозорість CSS відповідає властивість opacity , яке відноситься до CSS3. Як значення використовують дробові числа від 0 до 1, де нуль відповідає повній прозорості, а одиниця, навпаки, непрозорості об'єкта. Для старих версій Internet Explorer доведеться використовувати властивість filter зі значенням alpha (Opacity = X), оскільки вони не підтримують властивість opacity. Замість X треба буде підставити число від 0 до 100 де 0 означає повна прозорість, а 100 - повна непрозорість.
Тоді, щоб зробити картинку прозорою при наведенні курсору у файл стилів, або між тегами
і html-файлу потрібно додати наступний css-код:На випадок якщо ви не розумієтеся на CSS поясню, що запис img.animate1:hover каже браузеру, що для всіх елементів , що мають атрибут class рівний animate1 при наведенні на них курсору миші, застосовувати зазначені стилі. А стилі вказуються між фігурними дужками ( і ). Якщо все зробили правильно, то має вийти приблизно так:
Можна зробити картинку у вихідному стані напівпрозорою, а при наведенні курсору робити її не прозорою. Тоді до CSS-файлу потрібно додати такі рядки:
img.animate1 (
filter: alpha (Opacity = 25);
opacity: 0.25;
}
img.animate1:hover (
opacity: 1;
}
Результат буде такий:
Для більшого ефекту можна сповільнити зміни прозорості зображення. Для цього можна скористатися властивістю CSS transition, яка встановлює ефект переходу між двома станами елемента. Додамо для прикладу одну секунду уповільнення. Тоді наш CSS код стане таким:
img.animate1 (
filter: alpha (Opacity = 25);
opacity: 0.25;
-Moz-transition: all 1s ease-in-out; /* ефект переходу для Firefox до версії 16.0 */
-webkit-transition: all 1s ease-in-out; /* ефект переходу для Chrome до версії 26.0, Safari, Android та iOS */
-o-transition: all 1s ease-in-out; /* ефект переходу для Opera до версії 12.10 */
transition: all 1s ease-in-out; /* ефект переходу для інших браузерів */
}
img.animate1:hover (
filter: alpha (Opacity = 100);
opacity: 1;
}
Результат:
За допомогою властивості transform зображення можна масштабувати, обертати, зрушувати, нахиляти. Спробуємо збільшити картинку. Тоді css-код буде таким:
img.animate1(
- o-transition: all 1s ease;
transition: all 1s ease;
}
img.animate1:hover(
- moz-transform: scale (1.5); /* ефект трансформації для Firefox до версії 16.0 */
- Webkit-transform: scale (1.5); /* ефект трансформації для Chrome до версії 26.0, Safari, Android та iOS */
- o-transform: scale (1.5); /* ефект трансформації для Opera до версії 12.10 */
- ms-transform: scale (1.5); /* ефект трансформації для IE 9.0 */
transform: scale (1.5); /* ефект трансформації для інших браузерів */
}
І результат буде таким:
До збільшення зображення можна додати поворот. Тоді css стилі трохи змінюватися:
img.animate1(
- moz-transition: all 1s ease;
- Webkit-transition: all 1s ease;
- o-transition: all 1s ease;
transition: all 1s ease;
}
img.animate1:hover(
- moz-transform: rotate (360deg) scale (1.5);
- Webkit-transform: rotate (360deg) scale (1.5);
- o-transform: rotate (360deg) scale (1.5);
- ms-transform: rotate (360deg) scale (1.5);
transform: rotate (360deg) scale (1.5);
}
Результат:
Вище ми розглянули випадки, коли в анімації бере участь одна картинка. Далі розглянемо способи заміни одного зображення на інше. У цьому випадку зазвичай готують два зображення однакового розміру: одне для вихідного вигляду, інше для його заміни.
Допустимо у нас є дві картинки, одна чорно-біла інша кольорова:
Зробимо так, щоб під час наведення курсору на чорно-біле зображення відображалося кольорове. Для цього вихідну картинку зробимо тлом елемента div за допомогою властивості background. А при наведенні на картинку курсора змінюватимемо фонову картинку за допомогою тих самих псевдокласу hover і властивості background. Для реалізації цього ефекту на html сторінку додаємо елемент div із класом rotate1:
І додаємо наступні описи стилів:
div.rotate1 (
background: url (img/2.jpg); /* Шлях до файлу з вихідним малюнком */
width: 480px; /* Ширина малюнка */
height: 360px; /* Висота малюнка */
}
div.rotate1:hover (
background: url (img/1.jpg); /* Шлях до файлу із замінним малюнком */
}
І результат:
Цей спосіб має один істотний недолік. Так як другий малюнок завантажується тільки при наведенні курсору, то якщо у користувача повільний інтернет, а розмір файлу з картинкою має великий розмір, відображення картинки відбуватиметься з деякою паузою. Тому нижче розглянемо ще кілька способів заміни картинок при наведенні курсору миші.
Наступний спосіб буде заснований на поєднанні двох картинок в один файл. Допустимо нам потрібно на сторінку помістити кнопку, яка при наведенні на неї курсору миші змінювала б вигляд. Для цього два зображення об'єднуємо в один файл і результуюча картинка виглядатиме приблизно так:
У цьому випадку зміна одного малюнка на інший здійснюватиметься шляхом зсуву фонового зображення по вертикалі за допомогою властивості background-position. Так як при натисканні на кнопці зазвичай відбувається перехід на іншу сторінку, то зображення вставимо в елемент< a>. Тоді в html-сторінку вставляємо такий код:
А в css-файл такий:
a.rotate2 (
background: url (img/button.png); /* Шлях до файлу з вихідним малюнком */
display: block; /* Посилання як блоковий елемент */
width: 50px; /* Ширина малюнка у пікселах */
height: 30px; /* Висота малюнка */
}
a.rotate2:hover (
background-position: 0 -30px; /* Зміщення фону */
}
Результат:
І останній на сьогодні спосіб, коли одне зображення розміщується під іншим за допомогою css правила position: absolute . В цьому випадку поміщаємо в контейнер div два зображення:
І додамо css-стилів:
Animate2(
position:relative;
margin:0 auto;/* встановлюємо блок div по центру сторінки*/
width:480px; /* Ширина */
height: 360px; /* Висота */
}
.animate2 img (
position:absolute; /* абсолютне позиціонування*/
left: 0; /* вирівнюємо картинки по лівому верхньому кутку div-а*/
top: 0; /* вирівнюємо картинки по лівому верхньому кутку div-а */
}
Після додавання правил css картинки будуть розміщені один під одним. Тепер керуючи прозорістю картинок за допомогою властивості opacity у звичайному стані показуватимемо другу картинку, а при наведенні курсору першу. Для цього у звичайному стані робимо картинку з класом first повністю прозорою, а при наведенні курсору навпаки: картинка з класом second буде повністю прозорою, а з класом first не прозорою:
Animate2 img.first ( /* перша картинка повністю прозора */
opacity:0;
filter:alpha (opacity=0);
}
.animate2:hover img.first ( /* при наведенні курсору перша картинка стає не прозорою */
opacity:1;
filter:alpha (opacity=100);
}
/* а друга при наведенні курсору стає прозорою */
opacity:0;
filter:alpha (opacity=0);
}
Результат:
Можна домогтися плавності переходу додавши до останнього правила властивості CSS transition:
Animate2:hover img.second, .animate2 img.second:hover (
opacity:0;
filter:alpha (opacity=0);
-Moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
І результат:
А якщо додати властивість transform:
Animate2:hover img.second, .animate2 img.second:hover (
opacity:0;
filter:alpha (opacity=0);
-Moz-transform:scale (0, 1);
-webkit-transform:scale (0, 1);
-o-transform:scale (0, 1);
-ms-transform:scale (0, 1);
transform:scale (0, 1); /* зменшуємо ширину картинки до 0 */
}
Вийде так:
Комбінуючи різні CSS властивості можна досягти різних hover ефектів при зміні картинок під час наведення курсору миші. Ці та інші приклади я помістив на цій сторінці, там же можна завантажити вихідні дані. На цьому все до нових зустрічей.
Завдання
Замінити одну картинку на іншу при наведенні курсору миші.
Рішення
Зміна однієї картинки на іншу при наведенні на неї курсору миші називається ефектом перекочування. Зазвичай для створення ефекту перекочування застосовується JavaScript, але в більшості випадків цілком достатньо CSS.
Псевдоклас:hover
Спочатку розберемо, як робиться власне сам ефект. Для цієї мети використовується псевдоклас: hover, він додається до бажаного селектора. Цей псевдоклас визначає стиль елемента, коли на нього наводиться курсор миші, що нам якраз і потрібно. Відразу відзначимо, що в браузері Internet Explorer версії 6 і нижче: Hover працює тільки з посиланнями, тоді як інші браузери розуміють: Hover і для інших елементів. Так що для універсальності доведеться поміщати зображення всередину контейнера . Сам малюнок додається та змінюється за допомогою стильової властивості background. Алгоритм дій наступний.
- Готуються два зображення однакового розміру, одне для вихідного вигляду, а друге — для заміни при ефекті перекочування.
- Вихідна картинка додається як фоновий малюнок до селектора A через стильову властивість background зі значенням url (URI), тут URI – шлях до графічного файлу.
- Приєднуємо псевдоклас до селектора A і знову включаємо властивість background , але в якості значення вказуємо заміщає зображення.
- Щоб посилання було за розміром картинки, її слід перетворити на блоковий елемент за допомогою властивості display зі значенням block , а також задати висоту та ширину посилання.
На рис. 1 наведено два зображення: вихідне (рис. 1а) та заміщувальне (рис. 1б).
а 
б
Мал. 1. Картинки для створення ефекту перекочування
Залишається зібрати весь код воєдино, як показано в прикладі 1. Щоб посилання не вело на певний файл, що в даному випадку зайве, додамо «заглушку» у вигляді символу решітки (#) до атрибуту href тега .
Приклад 1. Використання псевдокласу:
HTML5 CSS 2.1 IE Cr Op Sa Fx
Наведений спосіб хоч і простий у реалізації, але має певний недолік. Оскільки другий малюнок завантажується тільки при наведенні курсору на посилання, відображення картинки відбувається з деякою паузою. Для усунення цієї затримки можна використовувати два зображення, а лише одне.
Ефект перекочування з одним малюнком
Здавалося б є протиріччя, адже ефект перекочування полягає у заміні одного малюнка на інший, як тоді обійтися однією картинкою? Насправді зображень буде два (рис. 2), але зберігатимуться вони в одному графічному файлі.
Мал. 2. Зображення із двома картинками
Зміна одного малюнка на інший відбувається зсувом зображення по вертикалі рахунок використання універсального властивості background або background-position , як показано в прикладі 2.
Приклад 2. Зміна положення малюнка
HTML5 CSS 2.1 IE Cr Op Sa Fx
Для селектора A встановлюється фонове зображення через властивість background, ширина (width) збігається з малюнком, а висота (властивість height) дорівнює половині висоти зображення. У результаті спочатку має відображатися зелена вкладка повністю.
Якщо вам сподобався ефект, ви можете просто скопіювати готовий код і використовувати його!
Оживіть свій веб-сайт!
Різні ефекти під час наведення можуть привнести свіжості на сторінки вашого сайту. Раніше для будь-якого ефекту потрібно було стикатися з JavaScript, але сьогодні, після появи технології CSS3, все може робити в обхід використання JavaScript.
Сьогоднішні приклади всі реалізовані та оптимізовані під нові сучасні браузери, і обов'язково працюватимуть у них (наприклад, у Mozilla або браузерах сімейства WebKit). Ми не можемо запевнити вас щодо роботи в IE, але в найсвіжіших версіях ефекти точно працюватимуть як треба. Але не варто забувати, що для кожного ефекту підготовлено привабливий варіант відкату на випадок, якщо браузер все-таки не підтримуватиме ефект.
01. Збільшення
Демо:Для перегляду
Цей ефект дуже просто впровадити, причому це можна реалізувати кількома способами. Ми скористалися методом, коли до кожного зображення додається параметр полів, а потім, при наведенні курсору миші, цей параметр забирається. Припустимо, параметр полів починається на 15 пікселях, а при наведенні стає 2 пікселі, що призводить до того, що ніби зображення підстрибує. Ви можете також використовувати цей ефект і з текстом, навіть якщо посилання розташовані вертикально, а не горизонтально.
Перехід тут можна виставляти на власний розсуд, причому ефект буде також привабливим без будь-якого переходу. Ми, наприклад, зробили ефект трохи плавним, що, як нам здалося, додасть ефекту родзинку.
CSS-код ефекту Bump Up
Ex1 img(
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-Moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
Ex1 img:hover (
margin-top: 2px;
}
02. Stack & Grow
Демо:Для перегляду
Автор цього ефекту, мабуть, хотів досягти якогось ефекту лампи-лави, оскільки при наведенні курсору миші на список посилань, кожне зображення повільно розширюється, а потім повертається до початкового розміру.
Для реалізації тут було використано зображення розміром 400х133 пікселів. Потім вони були змінені до 300х100 пікселів за допомогою CSS, і розширені при наведенні курсору миші. Так як у прикладі весь список вирівняний по центру, новий розмір зображень заломлював все вирівнювання. Цю проблему можна вирішити за допомогою виставлення негативних полів у половину ширини зображень у збільшеному розмірі.
CSS-код для Stack & Grow
/*Example 2*/
#container (
width: 300px;
margin: 0 auto;
}
#ex2 img(
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-Moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
#ex2 img:hover (
height: 133px;
width: 400px;
margin-left: -50px;
}
03. Fade Text in
Демо:Для перегляду
Тут автор хотів створити щось на кшталт події типу javascript, коли ви наводите курсор однією пункт, а ефект відображається іншому. Тут було взято текст і зображення, а потім поміщено в окремий div з вирівнюванням по лівому краю. Далі до div'у були додані параметри color: transparent та line-height: 0px. Це дозволило розмістити текст по верхньому краю div'у і взагалі сховати його.
Для того, щоб текст з'явився знову, ми просто змінюємо колір і висоту рядка. Коли ви наводите зображення, текст знову з'являється. Дуже кумедний та легкий ефект.
CSS-код ефекту Fade Text In
#ex3 (
width: 730px;
height: 133px;
line-height: 0px;
color: transparent;
font-size: 50px;
font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
}
#ex3:hover (
line-height: 133px;
color: #575858;
}
#ex3 img(
float: left;
margin: 0 15px;
}
04. Crooked Photo
Демо:Для перегляду
Цей ефект дуже простий, але він чудово підійде для галереї мініатюр. Для початку вам потрібно створити сітку із зображеннями, а потім обертати зображення при наведенні курсору миші на них, що створює привабливий ефект.
Тут потрібно використовувати багато нових значень CSS, тому варто розглядати також варіант відкату для попередніх версій браузерів. У нашій галереї будуть використані переходи, трансформації, а також тіні блоків, щоправда, на ваше бажання. Трансформація відповідатиме за обертання зображення, а переходи відповідатимуть за м'який та плавний ефект.
Тут ви можете використовувати псевдо-селектори.
CSS-код для Crooked Photo
#ex4 (
width: 800px;
margin: 0 auto;
}
#ex4 img (
margin: 20px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-Moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#ex4 img:hover (
-webkit-transform: rotate(-7deg);
-Moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
05. Fade In and Reflect
Демо:Для перегляду
Цей ефект трохи складніший у реалізації, тому нам довелося трохи повозитися з ним, щоб досягти гідного ефекту. Стандартне положення зображення – трохи прозоре. Потім, коли ви наводите на зображення, рівень прозорості знижується, і зображення набуває початкового вигляду, а також з'являється невелике свічення та відображення (тільки для браузерів WebKit).
На жаль, відображення – це не зовсім перехід, тому воно з'являється відразу, незважаючи на те, що решта вмісту з'являється в уповільненому темпі.
Якщо ви заплуталися в CSS-коді відображень, ви можете дізнатися про це більше у статті (David Walsh).
CSS-код ефекту Fade In and Reflect
#ex5 (
width: 700px;
margin: 0 auto;
min-height: 300px;
}
#ex5 img (
margin: 25px;
opacity: 0.8;
border: 10px solid #eee;
/*Transition*/
-webkit-transition: all 0.5s ease;
-Moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
/*Reflection*/
-webkit-box-reflect: нижче 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)) );
}
#ex5 img:hover (
opacity: 1;
/*Reflection*/
-webkit-box-reflect: нижче 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)) );
/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
Висновок
Цих 5 прикладів має бути достатньо для натхнення вас на створення щось власне. Пам'ятайте, що ви завжди можете поекспериментувати з готовими прикладами, а потім розповісти нам про них.
Якщо ви зустрічали інші привабливі ефекти десь у мережі, то, будь ласка, розкажіть нам та іншим читачам про це.
Застосування різних ефектів CSS при наведенні курсору на зображення, посилання або текст є одним з найбільш поширених методів CSS.
У цій статті я зібрав багато цікавих ефектів CSS3, які виявляються при наведенні курсору миші. Ви можете легко застосувати їх на своєму сайті або на інших веб-проектах. Давайте подивимося, що я приготував для вас.
1. 10 Stylish Hover Effects
Як випливає з назви, це колекція із 10 неймовірно стильних ефектів наведення.
Вихідний код
2. Direction-aware Hover Effect
Коли ви наводите вказівник миші на різні елементи, CSS hover ефект при наведенніслідує за курсором і створює дивовижні 3D презентації.
Вихідний код
3. Wacom Hover Effect
Це вже досить побитий ефект, але багато людей все одно із задоволенням його використовують. Презентація є простою, але привабливою.
Вихідний код
4. CSS3 Hover Effects
Якщо ви шукаєте кругових ефектів наведення, тут ви знайдете кілька цікавих. Загалом є 12 різних CSS hover ефектів рамки.
Вихідний код
5. Hover Animation from UNIQLO
Це ще один цікавий ефект наведення. Він ідеально підходить для мініатюр або інших типів зображень.
Вихідний код
6. Button Hover Effects
А ось кілька вражаючих ефектів наведення кнопок. Усі вони чудово підійдуть для сайтів будь-якого типу.
Вихідний код
7. 10 Stunning Hover Effects
Ще один набір із 10 hover ефектів CSS для кнопок. Більшість із них досить вражаючі.
Вихідний код
8. CSS3 Hover Effects 2
Це колекція, що складається із чотирьох різних ефектів наведення на зображення. Разом з ефектом відображаються його назва та опис.
Вихідний код
9. Bounce on Hover
Це цікавий і цікавий ефект наведення для зображень. Кругла рамка ідеально підходить для застосування до аватарок учасників команди, зображень рекомендацій.
Вихідний код
10. 8-біт Hovers
Цей стильний vintage hover ефект CSS викликає у вас почуття ностальгії. Ви можете використовувати його, щоб створити стиль ретро для сайту.
Вихідний код
11. Simple Title Hover Effect
При наведенні курсору миші зображення цей ефект виводить заголовки на тлі з низькою непрозорістю.
Вихідний код
12. Flip Down Effect
Це ще один простий, але дуже красивий CSS hover ефект при наведенні. При наведенні курсору миші на зображення він виводить назву та опис за допомогою смарт-ефекту перегортання.
Вихідний код
13. Curiosity Award
Поки ви не наведете курсор миші на зображення, ви не зрозумієте красу цього ефекту. Випадкові лінії красиво перетворюються на логотип, а потім він розфарбовується квітами.
Вихідний код
14. Image Hover Effect
Це неймовірний CSS hover ефект кадру для зображень. Спосіб, за допомогою якого одне зображення проявляється на тлі іншого, є неймовірним!
Вихідний код
15. Hover Animation
При наведенні курсору на зображення застосовується зменшення непрозорості з фокусуванням на посиланні.
Вихідний код
16. Hover Me Brother
Можливо, це і не дуже корисний hover ефект CSS, але кумедний. Просто наведіть курсор миші на сонцезахисні окуляри і почнеться магія.
Вихідний код
17. Nautilus SCSS HAML Hover Effects
Це креативний ефект наведення, доступний у кількох варіаціях. Вони пропонують унікальні можливості для оформлення зображень.
Вихідний код
18. SVG Border Hover Effect 1
Підійде для тексту, кнопок чи зображень. Поступове відтворення рамки – це справді цікавий ефект.
Вихідний код
19. Hover Search Map Icon
Вам потрібен CSS hover ефект при наведенні для панелі пошуку або піктограми картки? Це саме він. Його безшовні перетворення є суцільним задоволенням для очей.
Вихідний код
20. Social Icon Pane
Цей ефект наведення можна застосувати, щоб спочатку сховати іконки соціальних медіа, а потім вивести їх, коли користувач наводить на них курсор миші.
Вихідний код
21. Product Item Additions Info
Це чудовий спосіб надання додаткової інформації про товари в інтернет-магазині. При наведенні курсору зображення продукту за допомогою гарного ефекту відображається інформація про нього.
Вихідний код
22. Animated Envelope
Ідеальний CSS hover ефект при наведенні для розділу « Зв'язатися з нами«. Він відображає контактну інформацію в конверті, що розкривається, але тільки після того, як користувач наведе курсор миші на зображення.
Вихідний код
23. Back to Top
Цей унікальний ефект наведення для кнопки "Вгору" дозволяє надати відвідувачам красивий, анімований покажчик.
Вихідний код
24. Fancy Hover
При наведенні курсору миші на зображення воно не тільки збільшується, але й змінюється спосіб його відображення.
Вихідний код
25. Reminders Icon Hover Effect
Цей ефект hover CSS додає до зображення красиві стилі.
Вихідний код
26. Circle Image Hover
Ефект наведення кругових зображень. У колекції присутні чотири різні стилі ефектів наведення.
Вихідний код
27. Safari Icon Hover Effect
Цей CSS hover ефект при наведенні відтворює анімацію іконок Safari. Ви можете замінити значок на власне зображення або логотип.
Якщо у вас є код якогось об'єкта, то його на 99% можна обернути на властивість:hover. Звичайно ж ми не розглядатимемо всі можливі варіанти використання a:hover.
Відео на тему Hover html css ефект при наведенні
І готельне відео на тему HoverЯ завжди називав "hover" - властивістю, і поміркуйте самі, що здатність змінюватися об'єктам - найправильніша назва властивість, але насправді "hover" - це псевдоклас.
Що таке hover?
Із самого початку потрібно дати визначення. Що таке hover!? Hover - як я написало раніше - здатність змінювати свої властивості при наведенні мишки.
1. Ну і вже раз нас спонукало написати цю сторінку саме "hover" для посилання і давайте сідлаємо якийсь дуже простий приклад для розуміння, як працює a:hover.
Зміна кольору за допомогою "hover"
ось вона
Це ви повинні розуміти, що тільки для цієї сторінки цей клас потрібен. Ну або для того, щоб, наприклад, якщо ви хочете змінити hover в одному з блоків на сторінці:
Зміна кольору посилання при наведенні hover
Висновок про реалізацію та використання hover
Для того, щоб використовувати псевдоклас hover, вам потрібно до якогось об'єкта, класу, тегу прикріпити цей hover, для посилання це буде a:hover, для якогось класу, який ми використовували вище цей клас first і в ньому ж посилання. То логіка така спочатку пишемо посилання "a", далі клас ".first", і далі до них двом наш ":hover" разом у нас має вийти так:
2. Ну і другий приклад -давайте, змінимо, ну наприклад властивість hover для картинки - додамо бордюр - це, найперше, що спало на думку.
нам потрібна якась картинка - взагалі не важливо яка це буде картинка, наприклад ось ця - що позначає нашу тему css Наведіть на картинку мишку і ... і нічого не відбувається! і нічого і не відбуватиметься, тому. що нічого у нас і не прописано
