본문 바로가기
CSS

mouse move

by 영감은어디에 2024. 10. 17.

.box span {position: absolute; display: block; width: 0; height: 0;border-radius: 50%;background: #fff;
	transition: 0.1s;transform: translate (-50%, -50%); 
	mix-blend-mode: difference;}
.box:hover span {width: 300px;height: 300px;}
document.querySelectorAll('.box').forEach(function (box) {
    box.addEventListener('mousemove', function(e){
    let x = e.pageX - box.offsetLeft; let y = e.pageY - box.offsetTop;
    document.querySelectorAll('span').forEach(function(span){
            span.style.left = x + 'px';
            span.style.top = y + 'px';
        })
    })
})