CSS selector a:hover

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

Нотатка:

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

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

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

Синтакс

:hover {
    css declarations;
}

Переглядачі

Переглядач
hover

4.0

7.0

2.0

3.1

9.6


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

Приклади


Обирає посилання і задає йому жовтий фон, коли на нього переміщують курсор.

a:hover { 
    background-color: yellow;
}

Обирає і задає стиль при наведенні курсору на елементи <p>, <h1> та <a>.

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

Обирає і задає стиль посиланням (за якими ще не переходили, за якими вже переходили, на які навели курсор та активним)

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

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

/* Посилання, на які навели курсор */
a:hover {
    color: red;
}

/* Посилання, по яким клікнули */
a:active {
    color: yellow;
}

Стилізує посилання

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

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

Відображає і ховає меню при наведенні курсору. Так зване "випадаюче меню".

ul {
    display: inline;
    margin: 0;
    padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
    position: absolute;
    width: 200px;
    display: none;
}
ul li ul li { 
    background: #555; 
    display: block; 
}
ul li ul li a {display:block !important;} 
ul li ul li:hover {background: #666;}

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів