Как изменить курсор при наведении в css?

Пользователь

от otha_marks , в категории: HTML/CSS , 3 года назад

Как изменить курсор при наведении в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от stacy , 3 года назад

@otha_marks  Для изменения вида курсора используется свойство cursor:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      a {
        color: royalblue;
      }
      a:hover {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <a href="https://dropcode.ru/">Ссылка</a>
  </body>
</html>

Пользователь

от pauline , 2 года назад

@otha_marks 

Чтобы изменить курсор при наведении на элемент, можно использовать свойство cursor в CSS и задать нужный тип курсора. Например, чтобы при наведении на ссылку курсор стал рукояткой, можно добавить следующее правило:

1
2
3
a:hover {
  cursor: pointer;
}


В этом коде мы используем псевдокласс :hover для выбора ссылок, на которые наведен курсор, и применяем свойство cursor, чтобы задать тип курсора pointer (рукоятка).


Можно использовать и другие типы курсора, например:

  • default (стандартный),
  • text (текстовый),
  • crosshair (прицел),
  • move (движение),
  • wait (ожидание),
  • help (помощь),
  • и т.д.


Полный список типов курсоров можно посмотреть в документации CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor.