1

How to change the mouse cursor into text?

For example into "Next" or "Previous" depending on the mouse position.

Avatar
  • 14,622
  • 9
  • 119
  • 198
Fabieng
  • 55
  • 1
  • 5
  • 1
    This "text" is just an image that replaces cursor. It's not some text that you can just change. And you should try something yourself. Learn stuff, try to make something, then ask for help. Right know you are asking for someone to do work for you. – Oen44 Dec 24 '18 at 18:05
  • Possible duplicate of [Custom Cursor Image CSS](https://stackoverflow.com/questions/336925/custom-cursor-image-css) – Oen44 Dec 24 '18 at 18:09
  • Ok , so it with the .cur custom , i need a png for the text and just change the cursor into it . – Fabieng Dec 24 '18 at 18:09
  • Yes, same thing from question above. – Oen44 Dec 24 '18 at 18:10

2 Answers2

5

To achieve expected result, use below mousemove event option
1.Create custom cursor div
2.Create mousemove event
3. Make custom cursor div follow cursor

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>
Naga Sai A
  • 10,771
  • 1
  • 21
  • 40
3

You can achieve it by setting image url to your elements cursor property.

Something like this,

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

Note: The text which you are looking on cursor is the image containing the text.

tech_boy
  • 195
  • 3
  • 13