2

Существует ли какая-либо практическая разница между двумя способами задания курсора?

button {
  cursor: pointer;
}

И:

button:hover {
  cursor: pointer;
}

В документах MDN указано, что:

Свойство CSS курсора определяет, какой курсор мыши будет отображаться, когда указатель её находится над элементом.

Итак, есть ли какая-то реальная разница? Должны ли быть один способ предпочтительными по сравнению с другими, или они взаимозаменяемы?

1

1 ответ 1

3

Да, есть разница, первый способ определяется при загрузке CSS, а вторая способ только на :hover.
Визуально мы не видим разницы, но если вы используете изображение в качестве курсора, то вы можете иметь небольшую задержку, если вы определяете курсор при наведении, поскольку вам нужно ждать загрузки изображения.

button:hover {
  cursor:url(https://picsum.photos/90/90?image=1069) 5 5, help;
}
<button>wait for loading</button>

Во втором примере изображение будет загружено перед наведением курсора (вы можете проверить вкладку сети в своем браузере, чтобы заметить это):

button {
  cursor:url(https://picsum.photos/90/90?image=1062) 5 5, help;
}
<button>no need to wait for loading</button>

Поэтому лучше использовать второй способ, чтобы избежать любой задержки и при необходимости подготовить курсор.

1
  • 1
    второй абзац не переведен
    – kizoso
    19 июл 2018 в 14:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.