#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);
});
'CSS' 카테고리의 다른 글
input checkbox 체크박스를 이용한 부트스트랩 아이콘 토글 (0) | 2024.04.29 |
---|---|
background bg css (0) | 2024.04.28 |
sns 카톡 사이트 링크 대표이미지 설명 만들기 (0) | 2024.04.28 |
favicon 파비콘 만들기 (0) | 2024.04.28 |
초기 리셋 관련 css 모음. reset.css normalize.css (0) | 2024.04.28 |
svg 이미지 css filter로 색상 변경하기 (0) | 2024.04.28 |
css flex 한방정리 (0) | 2024.04.28 |
css page start setting 처음 세팅 (1) | 2024.04.28 |