Change the mouse pointer using JavaScript

by

JavaScript is pretty good at manipulating CSS:

 document.body.style.cursor = *cursor-url*;
 //OR
 var elementToChange = document.getElementsByTagName("body")[0];
 elementToChange.style.cursor = "url('cursor url with protocol'), auto";

or with jQuery:

$("html").css("cursor: url('cursor url with protocol'), auto");

Firefox will not work unless you specify a default cursor after the imaged one!

other cursor keywords

Also remember that IE6 only supports .cur and .ani cursors.

If cursor doesn’t change: In case you are moving the element under the cursor relative to the cursor position (e.g. element dragging) you have to force a redraw on the element:

// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';
// in jquery
$('#parentOfElementToBeRedrawn').hide().show(0);

working sample:

document.getElementsByTagName("body")[0].style.cursor = "url('http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur'), auto";
div {
  height: 100px;
  width: 1000px;
  background-color: red;
}
<html xmlns="http://www.w3.org/1999/xhtml">

  <body>
    <div>
    hello with a fancy cursor!
    </div>
  </body>

</html>

More Related Contents:

  1. assign color to mouse cursor using CSS
  2. How to get a word under cursor using JavaScript?
  3. Assigning prototype methods *inside* the constructor function – why not?
  4. Dynamically set property of nested object
  5. Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL [duplicate]
  6. jqGrid add new column
  7. Can you control GIF animation with Javascript?
  8. clearRect function doesn’t clear the canvas
  9. Getting byte array through input type = file
  10. JS string.split() without removing the delimiters [duplicate]
  11. How can I calculate the number of years between two dates?
  12. How to save a base64 image to user’s disk using JavaScript?
  13. Sampling a random subset from an array
  14. what’s the equivalent of jquery’s ‘trigger’ method without jquery?
  15. Load less.js rules dynamically
  16. Passing dynamic javascript values using Url.action()
  17. html “data-” attribute as javascript parameter
  18. How to setInterval for every 5 second render with React hook useEffect in React Native app?
  19. JavaScript – Map() increment value
  20. What does setTimeout return?
  21. JavaScript text between double quotes
  22. How to disable/enable a button with a checkbox if checked [duplicate]
  23. html5 drag and drop FOR MOBILE [duplicate]
  24. Why won’t this JavaScript (using document.open and document.write) work in Internet Explorer or Opera?
  25. Why is “javascript:” pseudo-protocol stripped from URL bar when pasted?
  26. puppeteer wait for page/DOM updates – respond to new items that are added after initial loading
  27. JavaScript: using constructor without operator ‘new’
  28. In web browsers, what’s the difference between onblur and onfocusout?
  29. Google maps API V3 method fitBounds()
  30. moment.js isValid function not working properly

Leave a Comment