<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");
}
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.