CSS :hover — стилі при наведенні курсора: приклади ефектів

Селектор :hover використовується для вибірки та задання стилю посиланням, на які наведено курсор.

правити

Загальний опис

Селектор :hover спрацьовує, коли користувач наводить курсор на елемент, і знімається, щойно курсор іде геть. Це головний спосіб показати, що елемент інтерактивний: кнопка, посилання, картка товару, пункт меню.

Стилізувати можна будь-що: колір і тло, тінь, трансформацію, видимість вкладеного підменю. У парі з transition зміна стає плавною — різкий стрибок стилів майже завжди виглядає гірше.

Сенсорні екрани — головна пастка. На телефоні курсора немає, і стиль після дотику «залипає» аж до дотику деінде. Тому ефекти наведення загортають у медіа-запит @media (hover: hover) — він вмикає їх лише на пристроях зі справжнім курсором.

У стилях посилань має значення порядок: :hover мусить іти після :link і :visited, інакше вони його перекриють. Мнемоніка — LVHA: :link → :visited → :hover → :active.

правити

Нотатка

Селектор :hover може бути використаний не тільки для посилань, а будь яких інших html елементів.

Також використовуйте селектори :link, :visited та :active для стилізації посилань.

Селектор :hover має йти після селекторів :link та :visited, якщо такі вказані.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

:hover {


    css declarations;


}

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
hover	4.0	2.0	3.1	9.6	7.0

Мобільних переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

<h1>Заголовок</h1>
<p>Абзац тексту.</p>
<a href="#">Посилання</a>

p:hover, h1:hover, a:hover {
    background-color: yellow;
}

<p><a href="#">Невідвідане посилання</a> — зелене.
Наведи курсор — почервоніє, натисни й утримуй — пожовтіє.</p>

/* посилання, за якими не переходили */
a:link {
    color: green;
}

/* посилання, за якими переходили */
a:visited {
    color: darkgreen;
}

/* посилання під курсором */
a:hover {
    color: red;
}

/* посилання в момент натискання */
a:active {
    color: yellow;
}

<p><a class="ex1" href="#">Наведи — я почервонію</a></p>
<p><a class="ex2" href="#">А я — збільшуся</a></p>

a.ex1:hover, a.ex1:active {
    color: red;
}

a.ex2:hover, a.ex2:active {
    font-size: 150%;
}

<ul class="menu">
    <li>
        <a href="#">Меню ▾</a>
        <ul>
            <li><a href="#">Перший пункт</a></li>
            <li><a href="#">Другий пункт</a></li>
        </ul>
    </li>
    <li><a href="#">Інший розділ</a></li>
</ul>

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu > li {
    display: inline-block;
}

.menu a {
    display: block;
    padding: 8px 14px;
    background: #333;
    color: #fff;
    text-decoration: none;
}

.menu li:hover > a {
    background: #555;
}

.menu li ul {
    position: absolute;
    width: 200px;
    display: none;
}

.menu li:hover ul {
    display: block;
}

.menu li ul li:hover a {
    background: #666;
}

<p><a href="#">Наведи на мене курсор</a> — тло стане жовтим.</p>

a:hover {
    background-color: yellow;
}