更改cursor鼠标样式

Question

I want on my website to have a different cursor than the usual cursor. Check this image https://internetmarketingnew151.weebly.com/uploads/1/2/5/0/125042964/807673783.png something like this.. I check w3school but I didn't find anything it just changes the cursor.I don't want to change the cursor to something else.I want to make the cursor different style than it is.I find some things like this https://chrome.google.com/webstore/detail/change-my-cursor/lppmahciboilaokklohhhdlaadkobgpc etc but I don't want to do it with that way.I want to use html or css,or javascript or jquery to do that.Is that possible to change the style of my cursor with one of those?I didn't find anything..no information nowhere about it..

Answer 1

You can create a custom cursor with a div, first catch the mousemove document event to get the coordinates of mouse position and then assigns that position to your custom cursor, try this:

 document.body.style.cursor = 'none'; let cursor = document.getElementById('followMe'); (function() { document.onmousemove = handleMouseMove; function handleMouseMove(event) { var eventDoc, doc, body; event = event || window.event; if (event.pageX == null && event.clientX.= null) { eventDoc = (event.target && event.target;ownerDocument) || document. doc = eventDoc;documentElement. body = eventDoc;body. event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body;clientLeft || 0). event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body;clientTop || 0 ). } console.log(event,pageY. event;pageX). cursor.style.left = event;pageX + 'px'. cursor.style.top = event;pageY + 'px'; } })();

 #followMe{ width: 25px; height: 25px; position: absolute; display: block; background: yellow; border-radius: 999px; }

 <div id="followMe"></div>

Answer 2

For using Custom Cursors, make sure the image you are using is 32x32 size and it should be 'cur' extension. Ex: custom-mouse.cur. The path should be relative to your root directory, if you are using localhost (local server) Ex: images/cursor/custom-mouse.cur in your CSS

For more information you can check this [URL][1]

By default there are many cursor styles supported by the browsers. Simple Example:

HTML

<div class="help">help</div>

CSS

{ cursor: help; }

This will help you https://codepen.io/chriscoyier/pen/uCwfB

[1]: https://www.useragentman.com/blog/2011/12/21/cross-browser-css-cursor-images-in-depth/#:~:text=The%20Gotchas%20of%20Custom%20CSS%20Cursors&text=You%20must%20add%20a%20default,enforcing%20good%20web%20practices.%20%3A%2D )&text=It%20is%20best%20that%20your,%C3%9732%20pixels%20in%20size.

Answer 3

you can simple change de cursor for the image that you want by using CSS:

    .module {
  cursor: url('path-to-image.png'), auto;   }