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