<body>
  <div id="cursor"><div id="stalker"></div></div>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
body{
  position: relative;
  cursor: none;
  height: 200px;
}

body a:hover{
  cursor: none;
}

#cursor{
  position: fixed;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.1s;
  opacity: 0;
}

#cursor.active{
  transform: scale(1.8);
}

#stalker{
  position: fixed;
  width: 10px;
  height: 10px;
  margin: 0 0 0 0;
  z-index: 998;
  pointer-events: none;
  background-color: #000;
  border-radius: 30px;
  background-clip: padding-box;
  border: solid 15px rgba(221, 221, 221, .5);
}

#stalker.active{
  background-color: #000;
}
$(function(){
  var cursor=$("#cursor");
  $(document).on("mousemove",function(e){
    var x=e.clientX;
    var y=e.clientY;
    cursor.css({
      "opacity":"1",
      "top":y+"px",
      "left":x+"px"
    });
  });

  $("a").on({
    "mouseenter": function() {
      cursor.addClass("active");
    },
    "mouseleave": function() {
      cursor.removeClass("active");
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.