Как изменить курсор в CSS
Вы, наверное, видели множество разнообразных курсоров на различных сайтах. Да что уж тут говорить, самый первый пример, который является одним из популярных и приходит в голову, это изменение курсора при наведении его на ссылку. Тогда курсор принимает вид руки с указательным пальцем. Вот сегодня я и расскажу Вам о CSS свойстве, при помощи которого можно видоизменять курсор, при наведении им на определенный элемент. Для того чтобы изменить вид курсора, существует CSS свойство cursor. Как видите, все логически понятно, осталось лишь разобрать значения, которые может принимать это свойство.
Изображение курсора |
Значение свойства cursor |
|
default |
|
pointer |
|
crosshair |
|
eresize |
|
help |
|
move |
|
neresize |
|
nresize |
|
nwresize |
|
progress |
|
seresize |
|
sresize |
|
swresize |
|
text |
|
wait |
|
wresize |
Вот такие значения может принимать CSS свойство cursor. Но хочу Вас предупредить о том, что прежде чем менять это значение, подумайте, а подойдет ли оно в данном случае для вашей задачи, и не собьет с толка пользователя. Так что с данным свойством нужно быть очень осторожным.
Осталось лишь разобрать небольшой пример, чтобы окончательно усвоить данное свойство. Для этого мы напишем такой код:
<html>
<head>
<title>Изменение курсора</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<p>Наведите курсор</p>
</body>
</html>
Применяем CSS стили к нашему абзацу:
p {
cursor: wait;
}
Можете проверить, что у Вас получится, если навести курсор на абзац текста. А на этом все, теперь Вы можете использовать изученное свойство на практике.
