cursor
Вид указателя мыши над элементом.
Синтаксис
cursor: pointer;Значения
| Параметр | Тип | Описание |
|---|---|---|
| pointer | keyword | Рука — для того, на что можно нажать. |
| default | keyword | Обычная стрелка. |
| not-allowed | keyword | Перечёркнутый круг — действие недоступно. |
| text | move | help | grab | keyword | Другие частые указатели: текстовый курсор, перемещение, справка, захват. |
Примеры
Наведите на блоки:
<style>
div { display: inline-block; padding: 10px; margin: 4px; background: whitesmoke; }
</style>
<div style="cursor: pointer;">pointer</div>
<div style="cursor: not-allowed;">not-allowed</div>
<div style="cursor: help;">help</div>
<div style="cursor: grab;">grab</div>
<div style="cursor: wait;">wait</div>Примечания
У ссылок pointer уже есть, у кнопок по умолчанию нет, поэтому многие сайты его добавляют. Не давайте pointer тому, на что нельзя нажать, — это вводит в заблуждение.
См. также
- pointer-events — Реагирует ли элемент на щелчки и касания или пропускает их к тому, что под ним.
- :hover — Срабатывает, пока над элементом находится указатель мыши.
- :disabled — Срабатывает у элементов формы с атрибутом `disabled`; `:enabled` — у активных.
Вопросы и ответы по теме
В учебнике
- Псевдоклассы — Стили для состояний и положения элементов — hover, focus, ссылки, first-child, nth-child, not и поля форм.