Javascript\jquery Mouse Cursor - Inconsistencies When Hovering Items

I'd like to replace the mouse cursor on my website with a custom one, composed of two elements: a cursor; a trail that follows the cursor and lags behind it. Doing that with jqu

Solution 1:

I think the cursor and the trail elements are interfering with the hover events. Even though they are at a high z-index, the browser still has to take them into account to figure out which element is actually getting hovered. The mouse cursor is still going over them after all, since they are not a “real” cursor, but actual elements positioned in that place.

Adding pointer-events none to both of them seems to fix the issue for the most part (checked in Chrome and Firefox, in both it seemed to significantly improve), so please give that a try:

.mouse_cursor,
.mouse_trail {
  pointer-events:none; 
}

https://jsfiddle.net/aur39py4/1/

I am assuming that you are not going to need any sort of hover effect on the cursor and trail themselves, so setting pointer-events:none should not have any adverse effects on the rest of what you’re doing on the page.