<style>
*{
cursor: none !important;
}
/*стили для курсора*/
.cursor {
position: fixed;
/*цвет для курсора*/
background: #f13338;
width: 8px;
height: 8px;
border-radius: 100%;
z-index: 99;
transition: 0.25s ease-in-out transform,
0.25s ease-in-out opacity;
user-select: none;
pointer-events: none;
transform: scale(0.8);
}
/*стили для курсора, при наведение на ссылку*/
.cursor::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 100%;
opacity: 0;
}
/*размер курсора, при наведение на ссылку*/
.cursor.hover {
opacity: 0.7;
transform: scale(6);
}
.cursor.hover::before {
opacity: 0.7;
}
</style>
<script>
$("body").prepend('<div class="cursor"></div>');
$(document)
.mousemove(function(e) {
$('.cursor')
.eq(0)
.css({
"left": e.pageX,
"top": e.pageY - $(window).scrollTop()
});
});
$("a").mouseenter(function(){
$('.cursor').addClass('hover');
})
.mouseleave(function(){
$('.cursor').removeClass('hover');
});
</script>