マウスカーソルに追従するマーカーを表示させる

更新日: 2022.04.9

const stalker = document.getElementById("js-stalker");
let hovFlag = false;

document.addEventListener("mousemove", function (e) {
	if (!hovFlag) {
		stalker.style.transform =
			"translate(" + e.clientX + "px, " + e.clientY + "px)";
	}
});

const linkElem = document.querySelectorAll(
	"a:not(.js-no-hov), button, input[type='submit'], #js-scroll-top"
);
for (let i = 0; i < linkElem.length; i++) {
	linkElem[i].addEventListener("mouseover", function (e) {
		hovFlag = true;
		stalker.classList.add("is-hover");
		let rect = e.target.getBoundingClientRect();
		let posX = rect.left + rect.width / 2;
		let posY = rect.top + rect.height / 2;
		stalker.style.transform = "translate(" + posX + "px, " + posY + "px)";
	});
	linkElem[i].addEventListener("mouseout", function (e) {
		hovFlag = false;
		stalker.classList.remove("is-hover");
	});
}
<div class="l-footer-stalker" id="js-stalker"></div>