Как установить свои курсоры на сайт
11:27 21.09.2017
Сегодня речь пойдёт о том, как сделать так, чтобы курсоры на вашем сайте меняли внешний вид, в зависимости от ситуации.
А потом с помощью css свойств определить вид курсора. Актуально делать это например когда пользователь наводит курсор на ссылку или картинку. Так он поймёт, что она кликабельна. Пользовательские курсоры могут указываться в формате CUR, GIF, MPNG, SVG. Если картинка с курсором не может отобразиться, то отображается следующий курсор по списку. С помощью gif формата можно делать анимированный курсоры, но наиболее популярным остаётся формат gif. Ниже мы приведём список стандартных курсоров, которые прописываются в тегах.
Пример:
HTML:
CSS:
А потом с помощью css свойств определить вид курсора. Актуально делать это например когда пользователь наводит курсор на ссылку или картинку. Так он поймёт, что она кликабельна. Пользовательские курсоры могут указываться в формате CUR, GIF, MPNG, SVG. Если картинка с курсором не может отобразиться, то отображается следующий курсор по списку. С помощью gif формата можно делать анимированный курсоры, но наиболее популярным остаётся формат gif. Ниже мы приведём список стандартных курсоров, которые прописываются в тегах.
Пример:
HTML:
<a class="cursor" href="index.php">Ссылка</a>
CSS:
.cursor img {
cursor: url(/img/cursor.cur), pointer;
}
default
- используется по умолчанию.
crosshair
- перекрестие.
hand
- рука, аналог pointer.
move
- определяет объект, который можно переместить.
pointer
- указатель, который обозначает ссылку.
help
- стрелка со знаком вопроса.
wait
- курсор обозначающий режим ожидания.- Жалоба