将光标更改为自定义文本

Question

我想将鼠标光标更改为文本“ div的下一个，div的上一个”

就像这样的链接： https://www.areaoffice.gr/projects/victoria

我暂时找不到解决方案。

Answer 1

您可以通过将图像url设置为元素的cursor属性来实现。

这样的事情，

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

注意：您在光标上看到的文本是包含该文本的图像。

Answer 2

要获得预期的结果，请使用下面的mousemove事件选项
1.创建自定义光标div
2.创建mousemove事件
3.使自定义光标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;
}