Total Theme Inject HTML JS and HTML (Circle Cursor Example) without pointer.js

Add this to functions.php

//ADD HTML
add_action( 'wpex_hook_footer_after', function() { ?>
<div id="cursor"></div>
<?php }, 40 );



function cursor_script() {
    ?>
<script>
	/*
if (window.matchMedia("(min-width: 768px)").matches) {
    let mousePosX = 0,
        mousePosY = 0,
        mouseCircle = document.getElementById("mouse-circle");

    document.onmousemove = (e) => {
        mousePosX = e.pageX;
        mousePosY = e.pageY;
    };

    let delay = 6,
        revisedMousePosX = 0,
        revisedMousePosY = 0;

    function delayMouseFollow() {
        requestAnimationFrame(delayMouseFollow);

        revisedMousePosX += (mousePosX - revisedMousePosX) / delay;
        revisedMousePosY += (mousePosY - revisedMousePosY) / delay;

        mouseCircle.style.top = revisedMousePosY  + "px";
        mouseCircle.style.left = revisedMousePosX  + "px";
    }
    delayMouseFollow();
}

https://stackoverflow.com/questions/68181685/circle-cursor-with-hover-effect
	*/
	var cursor = document.getElementById("cursor");
	
	document.body.addEventListener("mousemove", function(e) {
		cursor.style.left = e.clientX + "px",
			cursor.style.top = e.clientY + "px";
	});
	
	//var link = document.querySelector("a");
	var links = Array.from(document.querySelectorAll("a"));

	links.forEach( item => {

		item.addEventListener("mouseenter", () => {
			cursor.classList.add("hover");
		});

		item.addEventListener("mouseleave", () => {
			cursor.classList.remove("hover");
		});
	});
</script>
    <?php
}
add_action('wp_footer', 'cursor_script');

Add this to your CSS

#cursor {
	position: fixed;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%;
	mix-blend-mode: difference;
	background-color: white;
	z-index: 10000;
	border: 2px solid white;
	height: 30px;
	width: 30px;
	transition: all 300ms ease-out;
	/*
    -webkit-transition: transform .3s ease-out;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
	*/
}

#cursor.hover {
    -webkit-transform: scale(2.5) translateX(-25%) translateY(-25%);
    transform: scale(2.5) translateX(-25%) translateY(-25%);
    background: #fff;
    border: none;
    mix-blend-mode: difference;
}