<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.