<div class="cursor"><img src="https://www.evoworx.co.jp/wp2/wp-content/themes/evoworx2017/common/image/dog_red.png" alt=""></div>html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
position: relative;
cursor: none;
}
.cursor {
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
z-index: 1001;
cursor: none;
pointer-events: none;
img {
width: 100%;
}
}var
cursor = $(".cursor"),
cWidth = 20, //カーソルの大きさ
mouseX = 0, //マウスのX座標
mouseY = 0; //マウスのY座標
$(document).on('mousemove', function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
cursor.css({
//カーソルの真ん中に座標軸が来るよう、
//カーソルの大きさの半分を引きます
left: mouseX - (cWidth / 2),
top: mouseY - (cWidth / 2)
})
});
External CSS
This Pen doesn't use any external CSS resources.