Установка курсора в стилях по умолчанию элемента или в элементе: hover?

215
12 сентября 2018, 00:00

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

button {
  cursor: pointer;
}

И:

button:hover {
  cursor: pointer;
}

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

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

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

Answer 1

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

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

For the second example the image will be loaded before hovering (you can check the network tab of your browser to notice this):

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

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

READ ALSO
Позиционирование div (не получается)

Позиционирование div (не получается)

Имеются три div блокаВыровнял по линии их с помощью display: inline-block

203
Заливка текста svg выходит за границы символа

Заливка текста svg выходит за границы символа

Подскажите, пожалуйста, в чем проблема (или я что-то не понимаю)Есть SVG

182
Атрибут value у input

Атрибут value у input

Возможно ли использовать два значения в атрибуте value у тега input? Если да, то возможно ли их парсить отдельно друг от друга с помощью js?

222