Search code examples
javascriptjquerycsscustom-cursor

Custom Cursor not working over hyperlinks

I'm working a website where I need a custom cursor in place of default cursor I've created one and it is detecting the mouse movement but when I try to place it over hyperlinks nothing is happening. Here is my code

HTML

<div class='cursor'></div>
<div class='cursor'></div>
<h1>Custom cursor</h1>
<a href="#">A link </a>

CSS

* {
  cursor: none;
}
.cursor {
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 99999;
}
.cursor:nth-child(1) {
  background-color: #3A1C71;
  z-index: 999999;
}
.cursor:nth-child(2) {
  background-color: #FFAF7B;
}

JS

$(document)
  .mousemove(function(e) {
    $('.cursor')
      .eq(0)
      .css({
        left: e.pageX,
        top: e.pageY
      });
    setTimeout(function() {
      $('.cursor')
        .eq(1)
        .css({
          left: e.pageX,
          top: e.pageY
        });
    }, 100);
  })

Codepen Demo

I'll appreciate your help

Thanks :)

Solution

  • Its not necessary to do all this manually for a custom cursor. If you have an image that you could use as a cursor you can just reference it like this:

    cursor: url('path-to-image.png'), auto;

    For more details you can look here: MDN reference

    If you want to use your current solution:

    The hyperlink is not reacting, because the two cursor divs are beeing on top of it and therefore blocking the link itself.

    It is possible to disable mouse events for these divs. Then these events would hit the underlaying element:

    .cursor {
  pointer-events: none;
}