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;}