본문 바로가기
CSS

마우스 포인터 모양 바꾸기 css js

by 영감은어디에 2024. 4. 28.
#m-pointe {position: absolute;width: 20px;height: 20px;top: 50%;left: 50%;margin: -10px 0 0 -10px;border-radius: 50%;background: #eee;
mix-blend-mode: difference;pointer-events: none; z-index: 9999;transition: transform 0.3s; } 
#m-pointe.hover {transform: scale(6); }
$(document).ready(function () {
    //마우스 모양 바꾸기
    var $mousePointer = $('#m-pointe');
    var $clickElements = $('a, button, input');
    function moveCursor(e) {
        $mousePointer.css({
            "left": e.pageX,
            "top": e.pageY
        })
    }
    $clickElements.mouseenter(function () {
        $mousePointer.addClass('hover');
    });
    $clickElements.mouseleave(function () {
        $mousePointer.removeClass('hover');
    });
    $(window).on('mousemove', moveCursor);

});