<ul class="links">
	<li><a href="#">ABC</a></li>
	<li><a href="#">DEG</a></li>
	<li><a href="#">HIJ</a></li>
</ul>

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #c00;
}
.links {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
}
.links li {
	margin: 0 .5em;
}
.links a {
	display: block;
	color: #fff;
	background: #000;
	text-decoration: none;
	padding: 1em 1.5em;
	transition: .2s linear;
}
.links a:hover {
	background: #fff;
	color: #000;
}
#stalker {
    position: fixed;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background:
    linear-gradient(#fff, #fff) center center / 100% 5px no-repeat,
    linear-gradient(#fff, #fff) center center / 5px 100% no-repeat;
    width: 200%;
    height: 200%;
    transition: .5s;
    pointer-events: none;
}
#stalker.active {
    background-size: 100% 50px, 50px 100%;
    opacity: 0;
    filter: blur(1em);
}

$(function(){
    var body = document.body;
    var stalker = document.createElement("div");
    stalker.id = "stalker";
    body.appendChild(stalker);
    body.addEventListener("mousemove", function(e) {
          stalker.style.left = e.clientX + "px";
          stalker.style.top = e.clientY + "px";
    }, false);

    $("a").on("mouseenter", function() {
        $('#stalker').addClass("active");
    });

    $("a").on("mouseleave", function() {
        $('#stalker').removeClass("active");
    });
});