Как из этой картинки сделать курсор на сайте?
Чтобы наводился левый верхний край, а не середина картинки
Пробовал сделать через css, но там курсор лагает. Наверное это из-за размера картинки(60х60px)
И еще один момент. На сайте есть встроенное видео iframe при наведении на него теряется курсор сделанный через css, а курсор сделанный через js не входить в эту область.
Помогите, пожалуйста!
<div class="cursor"></div>
<style>
.cursor {
height: 60px;
width: 60px;
pointer-events: none;
position: absolute;
z-index: 99;
box-sizing: border-box;
background: url("/media/cursore/cursore.svg");
transition: 0, 1s;
transform: translate(-50%, -50%);
}
</style>
<script>
const cursor = document.querySelector(".cursor");
const mouseMove = function (e) {
let x = e.clientX;
let y = e.clientY;
cursor.style.left = x + "px";
cursor.style.top = y + "px";
};
document.addEventListener("mousemove", mouseMove);
</script>
*, html, iframe > *{
cursor: url("/media/cursore/cursore.svg"), auto;
font-family: sans-serif;
}
