Изменить курсор на пользовательский текст

Question

Я хотел бы изменить курсор мыши на текст "следующий справа от div и prev слева"

Точно так же, как эта ссылка: https://www.areaoffice.gr/projects/victoria

Iне могу найти решение в данный момент.

Answer 1

Этого можно добиться, установив URL-адрес изображения в свойстве курсора элементов.

Примерно так:

.custom {
  cursor: url(images/my-cursor.png);
}

Примечание. Текст, который вы смотрите на курсоре, - это изображение, содержащеетекст.

Answer 2

Для достижения ожидаемого результата используйте опцию события mousemove ниже
1.Создать пользовательский курсор div
2.Создать событие mousemove
3. Заставить пользовательский div div следовать за курсором

codepen - https://codepen.io/nagasai/pen/NegKGK

function custom(event){
  var el = document.getElementById("hov");
	el.style.top = event.clientY + "px";
	el.style.left = event.clientX + "px";
		}

document.getElementById("main").addEventListener('mousemove', custom);

div:hover > #hov{
  display : block;

}

#hov{
  display:none;
  position:absolute;
  font-style: italic;
  font-size:20px;
  font-weight: bold;
  color: red;
}

#main{
  width: 200px;
  height:200px;
  background: green;
    cursor: none;
}

<div id="main">text<div id="hov">hover</div></div>

Answer 3

Проверьте это:

https://www.w3schools.com/csSref/playit.asp?filename=playcss_cursor&preval=alias

div {
   cursor:text;
}