Проблема с пользовательским курсором ссылки в Chrome

Question

Я хочу использовать пользовательский курсор для наведения ссылок.Он отлично работает в Safari и Firefox, но в Chrome он возвращается на курсор по умолчанию на миллисекунду, а затем переходит на мой пользовательский курсор.

Codepen: https://codepen.io/ford1234/pen/vwzRgJ

Я воссоздал проблему в Codepen, но это также происходит на сайте, к которому я ее применяю.

<div>
  <a href="#"><p>Hello</p></a>
</div>

<style>
html {
    cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/02/black-01.png'), auto;
}

a:hover {
    cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'), auto;

}

Ожидаемый результат: переход от круга к треугольнику.Фактический результат: переход от круга к указателю руки по умолчанию к треугольнику.

Answer 1

удалить ": hover" на вашем селекторе. ваш селектор должен быть;

а { курсор: url ('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'), авто; }

Answer 2

Вы пробовали длительность перехода или задержка перехода ? Это используется для определения продолжительности указанного перехода. Это время, которое требуется целевому элементу для перехода между двумя определенными состояниями.

.example {
    transition-duration: 0s;
    // or
    transition-delay: -1s;
}

Также следует помнить, что некоторые функции поддерживаются только определенными версиями браузера.