Как изменить курсор на руку при наведении на элемент списка?
У меня есть список, и я добавил обработчик кликов для его элементов:
<ul>
<li>foo</li>
<li>goo</li>
</ul>
Как я могу изменить указатель мыши на указатель в виде руки (как при наведении на кнопку)? В данный момент указатель превращается в указатель для выделения текста, когда я навожу курсор на элементы списка.
3 ответ(ов)
В свете прошедшего времени, как упоминали другие, теперь вы можете безопасно использовать:
li { cursor: pointer; }
Для достижения кроссбраузерного результата используйте следующие значения для свойства cursor
в CSS:
cursor: pointer;
cursor: hand;
Однако стоит отметить, что значение hand
не поддерживается во всех браузерах и является устаревшим. В большинстве случаев достаточно использовать только cursor: pointer;
, так как оно корректно отображает указатель в современных браузерах. Если вам необходимо обеспечить поддержку для старых версий браузеров, то стоит рассмотреть альтернативные способы, но cursor: hand;
использовать не рекомендуется.
Таким образом, оптимальным будет задать только cursor: pointer;
, так как это гарантирует правильное поведение в современных браузерах.
Чтобы изменить курсор мыши при наведении на элемент списка в CSS, вы можете использовать следующие стили:
li:hover {
cursor: pointer; /* Устанавливает курсор как указатель при наведении на элемент списка */
}
Обратите внимание, что свойство cursor: hand;
не является валидным значением CSS и не поддерживается во всех браузерах. Правильное значение для курсора при наведении — это cursor: pointer;
. Это значение сигнализирует пользователю, что элемент интерактивен.
Таким образом, используйте только cursor: pointer;
, как показано выше.
Просмотр состояния :hover в средствах разработчика Chrome
Получить координаты (X,Y) HTML-элемента
Стилизация кнопки input type="file"
Изменение цвета элемента hr
Использование подстановочного знака * в CSS для классов