Search code examples
csshovermouse-cursor

Problem with custom link cursor in Chrome

I want to use a custom cursor on hover for links. It works fine on Safari and Firefox, but on Chrome it jumps back to the default cursor for a millisecond, and then goes to my custom cursor.

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

I've recreated the problem in Codepen but it also happens on the site I'm applying it to.

<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;

}

Expected result: A transition from the circle to the triangle. Actual result: A transition from the circle, to the default hand pointer, to the triangle.

Solution

  • remove ":hover" on your selector. your selector must be;

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