# Cursor Styling
The pointer-events property allows for control over how HTML elements respond to mouse/touch events.
In this example,
‘none’ prevents all click, state and cursor options on the specified HTML element [[1]]
Other valid values for HTMl elements are:
- auto;
- inherit.
# caret-color
The caret-color CSS property specifies the color of the caret, the visible indicator of the insertion point in an element where text and other content is inserted by the user’s typing or editing.
Как изменить курсор при наведении мыши в CSS
Почти все веб-страницы меняют курсоры для лучшего восприятия пользователем или без какой-либо причины. Настройка курсора является простым способом добавления дополнительного эффекта на вашей веб-странице.
Для установления внешнего вида курсора используйте CSS свойство cursor. Это свойство используется для изменения вида курсора мыши cursor на элементах. Оно может быть полезным на веб-страницах в случае, когда кроме щелчка кнопкой нужно выполнить несколько действий.
Эта статья поможет вам контролировать, какими способами может курсор в CSS помочь в вопросе улучшения пользовательского восприятия.
Представим вам следующие методы контролирования курсора:
- Как сделать курсор в виде руки при наведении мыши на элемент списка
- Как изменить курсор гиперссылки при наведении мыши
- Как установить изображение для курсора
- Пример со всеми видами маркеров
Как сделать курсор в виде руки при наведении мыши на элемент списка
Если хотите изменить указатель мыши, чтобы он стал в форме руки при наведении мыши на элемент списка, можно установить класс для элемента списка (<li>) и установить стиль только для него. Но если необходимо установить указатель в форме руки для всех элементов списка, просто установите стиль для элемента <li> .
Код будет иметь следующий вид, если хотите установить курсор в виде указателя:
Давайте рассмотрим пример вышеуказанного метода:
Пример
Другой пример, где меняется курсор-указатель. Здесь мы используем селектор :nth-child вместе с nth-child(odd) как cursor: progress и nth-child(even) как cursor: pointer для отдельных типов курсора на разных элементах.
Пример
Как изменить курсор гиперссылки при наведении мыши
Известно, что курсор по умолчанию для гиперссылки устанавливается как «pointer». Если хотите изменить его, нужно указать тип курсора для элемента <a> с помощью CSS селектора :hover.
Чтобы изменить «pointer» в «default», вам понадобится эта часть кода:
Смотрите следующий пример:
Пример
Так как ссылки имеют color: blue и text-decoration: underline по умолчанию, рекомендуется изменить цвет и продолжить работу с гиперссылками.
Как установить изображение для курсора
Давайте научимся, как еще можно работать с курсором! Можно также установить выбранное вами изображение как курсор на вашей веб-странице.
После этой части кода установите свойство cursor как image:
Это довольно интересный способ. Можете добавить его на вашу веб-страницу, и пользователи будут в восторге. Представьте, что у вас есть форма, которая соответствует определенной эмоции. Здесь отлично подойдет использование эмоджи.
Пример
Рассмотрим другой пример, где использованы иконки. Можете использовать их из веб-страниц, где возможно применить код Base64, просто вставляя этот код в URL значение курсора. Или можно загрузить иконку на вашу веб-страницу и использовать URL для установления курсора.
Cursor
Use .cursor-auto to allow the browser to change the cursor based on the current content (e.g. automatically change to text cursor when hovering over text).
Default
Use .cursor-default to change the mouse cursor to always use the platform-dependent default cursor (usually an arrow).
Pointer
Use .cursor-pointer to change the mouse cursor to indicate an interactive element (usually a pointing hand).
Use .cursor-wait to change the mouse cursor to indicate something is happening in the background (usually an hourglass or watch).
Use .cursor-text to change the mouse cursor to indicate the text can be selected (usually an I-beam shape).
Use .cursor-move to change the mouse cursor to indicate something that can be moved.
Not Allowed
Use .cursor-not-allowed to change the mouse cursor to indicate something can not be interacted with or clicked.
Customizing
Cursors
By default Tailwind provides six cursor utilities. You change, add, or remove these by editing the theme.cursor section of your Tailwind config.
Responsive and pseudo-class variants
By default, only responsive variants are generated for cursor utilities.
You can control which variants are generated for the cursor utilities by modifying the cursor property in the variants section of your tailwind.config.js file.
For example, this config will also generate hover and focus variants:
Disabling
If you don't plan to use the cursor utilities in your project, you can disable them entirely by setting the cursor property to false in the corePlugins section of your config file:
Changing Cursor with CSS for better UX
The cursor CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.
There are some cases where the default cursor behaviour from the User Agent Stylesheet doesn’t cut it. In these cases, we ought to change the cursor to something that reflects the expected user interaction on that element.
Checkout all the cursors on codepen ��
Using a Custom Cursor ↓
The cursor property is specified as zero or more <url> values, separated by commas. The cursor property does accept SVG files in all its glory but not Gifs.
Yes, you can create your own custom cursor using any images like png, jpg, etc.
Output:
�� NOTE: The size of the images should not be greater than 32*32 DIP, else you will get the below warning and your image won’t work.