Как изменить курсор мыши при наведении на элемент? Хочу руку-указатель на своём блоке
У ссылок курсор превращается в руку, а у моего div, который работает как кнопка, остаётся обычная стрелка. Как сделать, чтобы и над ним появлялась рука?
2 ответа
За вид курсора отвечает свойство cursor. Рука-указатель — это pointer:
.clickable {
cursor: pointer;
}
Теперь над этим блоком курсор станет рукой, и пользователю понятно, что на него можно нажать. У ссылок <a> это работает само, а вот div и span приходится подсказывать вручную.
Есть и другие значения: default (стрелка), text (как для текста), not-allowed (перечёркнутый), move и т.д. — но для «кликабельного» нужен именно pointer.
Совет: если делаешь кликабельный элемент, который не <a> и не <button>, кроме cursor: pointer подумай про доступность — настоящие кнопки удобнее для клавиатуры и скринридеров. Но визуально да, cursor: pointer обязателен, иначе непонятно, что элемент кликается.