two circles should follow the cursor – one small and one big (with delay)

Question

I have seen this tendency on some websites now, where the default cursor is replaced with a new cursor – in many cases circles

These cursors are interactive – with i

Answer 1

You are almost good, simply make both element behave the same and by adding the transition on the small one you will make it slower and create the follow effect.

$('body').mouseover(function() {
  $(this).css({
    cursor: 'none'
  });
});

$(document).on('mousemove', function(e) {
  $('#circle-big').css({
    left: e.pageX,
    top: e.pageY
  });
  $('#circle').css({
    left: e.pageX,
    top: e.pageY
  });

});

#circle-big {
  display: block;
  position: absolute;
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  z-index: -1;
  text-align: center;
  border: 2px solid red;
  border-radius: 50%;
}

#circle {
  display: block;
  position: absolute;
  margin: auto;
  transition: all 1s linear;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  margin-left: -7.5px;
  z-index: -1;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}

a {
  font-size: 26px;
  text-align: center;
  margin: 100px auto;
  display: block;
}

a:hover {
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
  <div id="circle-big"></div>
  <div id="circle"></div>
</div>

<a>link</a>

Or change the transition if you want the bigger one to follow the small one:

$('body').mouseover(function() {
  $(this).css({
    cursor: 'none'
  });
});

$(document).on('mousemove', function(e) {
  $('#circle-big').css({
    left: e.pageX,
    top: e.pageY
  });
  $('#circle').css({
    left: e.pageX,
    top: e.pageY
  });

});

#circle-big {
  display: block;
  position: absolute;
  margin-top: -30px;
  margin-left: -30px;
  transition: all 1s linear;
  width: 60px;
  height: 60px;
  z-index: -1;
  text-align: center;
  border: 2px solid red;
  border-radius: 50%;
}

#circle {
  display: block;
  position: absolute;
  margin: auto;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  margin-left: -7.5px;
  z-index: -1;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}

a {
  font-size: 26px;
  text-align: center;
  margin: 100px auto;
  display: block;
}

a:hover {
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
  <div id="circle-big"></div>
  <div id="circle"></div>
</div>

<a>link</a>

UPDATE

You may consider event on links tag if you want to change the cursor when hovering links.

Here is a simple example:

$('body').mouseover(function() {
  $(this).css({
    cursor: 'none'
  });
});

$(document).on('mousemove', function(e) {
  $('#circle-big').css({
    left: e.pageX,
    top: e.pageY
  });
  $('#circle').css({
    left: e.pageX,
    top: e.pageY
  });
});
$('a').mouseover(function() {
  $('#cursor').addClass('on-link');
})
$('a').mouseout(function() {
  $('#cursor').removeClass('on-link');
})

#circle-big {
  display: block;
  position: absolute;
  margin-top: -30px;
  margin-left: -30px;
  transition: all 1s linear;
  width: 60px;
  height: 60px;
  z-index: -1;
  text-align: center;
  border: 2px solid red;
  border-radius: 50%;
}

#circle {
  display: block;
  position: absolute;
  margin: auto;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  margin-left: -7.5px;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  z-index: -1;
  box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}

#cursor.on-link #circle-big {
  border: 2px solid blue;
}

a {
  font-size: 26px;
  text-align: center;
  margin: 100px auto;
  display: block;
}

a:hover {
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
  <div id="circle-big"></div>
  <div id="circle"></div>
</div>

<a>link</a>