Custom cursor doesn't allow click? JS

css, javascript, jquery

Solution

Your custom cursor is preventing mouse clicks from reaching the underlying page.

There's no need to hack around with z-indexes or actively hiding/revealing the cursor to solve this; `pointer-events` exists for this purpose:

#follower {
    pointer-events: none
}

Any pointer (mouse or touch) events will now fall through to whatever is behind your custom cursor. Note that this includes `:hover` events, so the standard hover cursor will appear on links unless you suppress it; for example:

a:hover {cursor: none}

Problem

I'm trying to create a custom cursor for certain elements of my site, the only issue I'm having is that although it works fine, I can no longer click elements. Anybody know what might be causing this? http://codepen.io/liamgallagher/pen/MmprwR ``` $('a').on('click',function(){ alert('sad'); }); (function() { var follower, init, mouseX, mouseY, positionElement, printout, timer; follower = document.getElementById('follower'); printout = document.getElementById('printout'); mouseX = (function(_this) { return function(event) { return event.clientX; }; })(this); mouseY = (function(_this) { return function(event) { return event.clientY; }; })(this); positionElement = (function(_this) { return function(event) { var mouse; mouse = { x: mouseX(event), y: mouseY(event) }; follower.style.top = mouse.y + 'px'; return follower.style.left = mouse.x + 'px'; }; })(this); timer = false; window.onmousemove = init = (function(_this) { return function(event) { var _event; _event = event; return timer = setTimeout(function() { return positionElement(_event); }, 1); }; })(this); }).call(this); ```

Original source