CODEWITHSUNDEEP
csshtml
Fabieng
Fabieng

Reputation: 55

Change cursor into custom text

How to change the mouse cursor into text?

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

Upvotes: 1

Views: 8866

Answers (2)

Naga Sai A
Naga Sai A

Reputation: 10975

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>

Upvotes: 6

tech_boy
tech_boy

Reputation: 195

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.

Upvotes: 3

Related Questions