CSS custom cursor image not working on hover

Goal

I'm trying to setup a custom css cursor across every element (i.e. applied to * selector).
But then apply another custom css cursor to hover states on particular elements.
I can get it working with custom cursors, but as soon as I use images this breaks.
The code snippets below work, but when I use the exact same code in my project, all I can see is the custom red cursor when hovering over an element with the .hover class
When I hover over a .hover element, the blue cursor (correct one) appears as a computed value in the inspector, but still shows the red cursor (incorrect one) visually on the page.

Example 1: Custom cursors that aren't images (working! ✅)

* {
    cursor: default;
}

.hover:hover {
    cursor: progress;
}

<a href="https://google.com">Link 1</a>
<a href="https://google.com">Link 2</a>
<a href="https://google.com" class="hover">Link 3</a>

Example 2: Custom image cursors (works here, but doesn't work in my project! ❌)

* {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADYSURBVHgBtZaNDYIwEIWfTIAb6CSOoJvQDWATXcEJGjdwg7JB3eC8M6dBQkqrvS95DZTwXn9IDyABAS2rZ3lWYJEqal/H2qEUeUkNKFPn7CAdVSwwn87KrZn3PxjP1adGTpXkltY8Ur2A+LUnfHOpaP6WF++NJgXYsG24OcEOJwFH2HGQJYp80cKGUQIIhjQwRgJG2PGwDrhLwA12XGWT5QuKsGH/agvP/uwa8YkxP+w0xFUMWC48/GCoYD4ghc7EpmTO9qSkRnj64++iU4PprIL2DbRyUD4BpR/d+UxAbB8AAAAASUVORK5CYII=), auto;
}

.hover:hover {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADUSURBVHgBtZaNDcIgEIUfnaBuoJM4gm5SNoBN7ApOQNzADegGuAHyc5raWBTlvuS1CUnfg15zV6CI74NUkAmyQZ7kaG0I2qKe+FAy8F/qVBGUduUqzOenkp/M1Q/GS6nSzn0jyXfv3KFdgFvUxI8NzR8y0VlQkgUPmy5cjuBDxoAD+NiLXBD04GESuSB8dGAmBkzg48YdcI0BF/BxFrnnw4GHHd2ren/FjHjC3uxSiGwYsDZ4vG5grlEmnYRrZL7UZKwwN/jj72Igg/mpLK1p+sxXuQO28d358+kFewAAAABJRU5ErkJggg==), auto;
}

<a href="https://google.com">Link 1</a>
<a href="https://google.com">Link 2</a>
<a href="https://google.com" class="hover">Link 3</a>

Note: I don't want to apply the hover state to the * selector as it just means the cursor is permanently set to hover anywhere on the page as every element triggers it.

Solution

Solved it! I had span tags wrapping around the text within the anchor tag which seemed to be getting in the way!

 <a href="" class="hover">Works</a>
 <a href="" class="hover"><span>Doesn't work</span></a>