- Проявляется, когда мы наводим курсор
.blog {
color: olive;
text-decoration: none;
}
.blog:hover {
color: red;
text-decoration: underline;
text-decoration-color: blue;
cursor: help;
}
- text-decoration: наличие или отсутствие линии рядом с текстом
- underline под текстом
- overline над текстом
- text-decoration-color: цвет этой самой линии
- cursor: вид курсора, который будет появляться при наведении
- auto: автоматический выбор вида курсора
- pointer: обычно, когда нужно переходить по какой-либо ссылке (ладонь с пальцем)
- text: выделение текста (палка с двумя засечками)
- vertical-text: то же самое выделение текста, но горизонтальное (лежащая палка с двумя засечками)
- grab: перчатка с пальцами, которая хочет что-то взять
- grabbing: перчатка с пальцами, которая уже что-то взяла
- zoom-in: лупа с плюсом внутри
- zoom-out: лупа с минусом внутри
- help: вопросительный знак
- progress: загрузка (в macOS синий крутящийся кружок)
- no-drop: зачёркнутый круг (нельзя что-то копировать)
- alias: стрелка, загнутая слева направо
- w-resize: стрелка влево (на запад)
- e-resize: стрелка вправо (на восток)
- n-resize: стрелка вверх (на север)
- s-resize: стрелка вниз (на юг)
- ne-resize: стрелка на северо-восток
- se-resize: стрелка на юго-восток
- nw-resize: стрелка на северо-запад
- sw-resize: стрелка на юго-запад
- ew-resize: стрелка на восток и запад (в две стороны)
- ns-resize: стрелка на север и юг (в две стороны)
- nesw-resize: стрелка на северо-восток и юго-запад (в две стороны). Выглядит как диагональ
- nwse-resize: стрелка на северо-запад и юго-восток (в две стороны). Выглядит как диагональ
- col-resize: выглядит как ew-resize, только посередине ещё есть палка
- row-resize: выглядит как ns-resize, только вдоль ещё есть палка
- move: крест со стрелками на концах
- context-menu: контекстное меню (значок таблицы)
- croshair: значок плюса без обводки
- cell: значок плюса с жирной обводкой
- copy: копирование (в macOS зелёный кружок с белым плюсом внутри)