Как изменить курсор при наведении css
Изменить курсор при наведении мы можем при помощи CSS свойства cursor .
Это свойство может принимать большое количество значений. Рассмотрим некоторые из них:
- cursor: default; стандартная стрелка
- cursor: auto; браузер сам определяет нужный курсор. Для ссылки это будет рука с поднятым указательным пальцем, для поля ввода — чёрточка, для обычных элементов — стрелка
- cursor: pointer; рука с поднятым указательным пальцем. По умолчанию показывается для нажимаемых элементов, например, ссылок
- cursor: text; это чёрточка с засечками сверху и снизу. По умолчанию показывается у полей ввода input или textarea
- cursor: none; курсор при наведении исчезнет.
Как изменить стандартный курсор на сайте?
В CSS существует свойство, с помощью которого вы сможете легко изменить курсор на своем сайте. Часто бывает так, что стандартный курсор Windows не вписывается в общую картину сайта. Чтобы изменить это, сделаем небольшие поправки в коде.
Делаем нестандартный курсор на сайте
Если вы хотите изменить курсор на всем сайте, то в стили вашего сайта добавьте следующее:
body { cursor: url('/пусть к файлу/sword.cur'), auto; >
В коде вам нужно изменить адрес до вашего курсора. Сам курсор может быть как обычное изображение (расширений *.png, *.gif, *.jpg, *.ico) или же иметь специальное расширение курсоров *.cur
Если же вы хотите изменить курсор, например, только при наведении на ссылку или нужный вам объект, то вставьте:
.link:hover { cursor: url('/путь к файлу/sword.cur'), auto; >
Здесь .link – это класс у ссылки, и при наведении на нее будет появляться наш курсор.
Стандартные свойства CSS для изменения курсора
Если же вы не хотите перегружать ваш сайт сторонними курсорами, то можно использовать стандартные свойства CSS. Что представляет из себя каждое свойство, отражено в таблице ниже. Наведите курсор на ячейку – и ваш курсор изменится.
| cursor: auto; | cursor: default; | cursor: none; |
| cursor: context-menu; | cursor: help; | cursor: pointer; |
| cursor: progress; | cursor: wait; | cursor: cell; |
| cursor: crosshair; | cursor: text; | cursor: vertical-text; |
| cursor: alias; | cursor: copy; | cursor: move; |
| cursor: no-drop; | cursor: not-allowed; | cursor: all-scroll; |
| cursor: n-resize; | cursor: e-resize; | cursor: s-resize; |
| cursor: w-resize; | cursor: col-resize; | cursor: row-resize; |
| cursor: nw-resize; | cursor: se-resize; | cursor: sw-resize; |
| cursor: ew-resize; | cursor: nesw-resize; | cursor: nwse-resize; |
| cursor: zoom-in; | cursor: zoom-out; | cursor: grabbing; |
| cursor: grab; | cursor: ns-resize; | cursor: ne-resize; |
Для применения этих свойств вы так же копируете нужное вам и применяете к объектам на вашем сайте, например:
.link:hover { cursor: w-resize; >
А в качестве бонуса мы предлагаем вам небольшую подборку красивых курсоров, которые вы можете использовать на своем сайте.
Изменить курсор при наведении
В HTML это делается для всех элементов одинаково. Чтобы изменить курсор при наведении нужно применить CSS-свойство cursor со значением pointer. Если Вы знаете, что такое CSS, то прописывать свойство нужно в CSS-файле, если не знаете, то писать можно в HTML-файле так:
То есть для нужного элемента Вам необходимо прописать строчку style=»cursor: pointer;». Тег в HTML обозначает кнопку. В приведенном примере в браузере при наведении курсора на кнопку вид курсора изменится со стрелки на руку.
Еще раз уточню, неважно для какого элемента Вам нужно изменить курсор — кнопка, картинка, слово и т.д. Для всего это делается через cursor: pointer.
Как изменить курсор браузера с помощью CSS
От автора: браузер автоматически меняет курсор мыши в контексте множества элементов интерфейса. Например, при наведении на ссылки он меняется на руку. Однако есть ситуации, когда вам потребуется вручную менять иконку указателя мыши для определенных операций (иконка компаса, показывающая, что элемент можно передвинуть). Обычно это делается через CSS, в частности через свойство cursor.
Думайте, куда наводите указатель
Крайне важно понимать, что нельзя изменять курсор мыши просто «потому что». Указатель мыши – первичный метод взаимодействия пользователя с вашим сайтом, и его изменение просто потому, что вам так хочется, может полностью разрушить ожидания пользователя от интерфейса, что приведет к разочарованию. Пользователь просто покинет сайт. Если вы используете свойство cursor, оно всегда должно подходить под вашу текущую задачу и соответствовать ожиданиям пользователя.
Также важно отметить тот факт, что изменение курсора в CSS не затрагивает его функционал. Если задать свойство cursor: grab, предмет автоматически не станет перетаскиваемым. Функциональная сторона вопроса обрабатывается на стороне JavaScript. CSS всего лишь изменяет представление курсора.
Свойство cursor задается для конкретных элементов. Часто это может быть :hover или другое похожее состояние.