div id=”currsor”
CSS
cursor{border-radius:50%;
position:fixed;
top:0;
left:0;
cursor: none;
pointer-events: none;
width: 8px;
height: 8px;
background-color: #000;
z-index:1000;
transition: width .3s, height .3s, top .3s, left .3s;
&.hov_{
top: -12px; //大きくなった分の座標調節
left: -12px; //大きくなった分の座標調節
width: 32px; //カーソルの直径
height: 32px; //カーソルの直径
background: rgba(10,0,0,0.50);
}
}
javascript
let cursorR = 4; //カーソルの半径
const cursor = document.getElementById(‘cursor’); //カーソル用のdivを取得
//上記のdivタグをマウスに追従させる処理
document.addEventListener(‘mousemove’, function (e) {
cursor.style.transform = ‘translate(‘ + e.clientX + ‘px, ‘ + e.clientY + ‘px)’;
});
//リンクにホバー時はクラスをつける
const linkElem = document.querySelectorAll(‘a’);
for (let i = 0; i < linkElem.length; i++) {
linkElem[i].addEventListener(‘mouseover’, function (e) {
cursor.classList.add(‘hov_’);
});
linkElem[i].addEventListener(‘mouseout’, function (e) {
cursor.classList.remove(‘hov_’);
});
}