Using external images for CSS custom cursors

by

It wasn’t working because your image was too big – there are restrictions on the image dimensions. In Firefox, for example, the size limit is 128x128px. See this page for more details.

Additionally, you also have to add in auto.

jsFiddle demo here – note that’s an actual image, and not a default cursor.

.test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}
<div class="test">TEST</div>

More Related Contents:

  1. Increase cursor size in HTML body
  2. Grid or Table? for Text and an Image on the bottom right (4/4) [duplicate]
  3. How do I disable the resizable property of a textarea?
  4. How do you keep parents of floated elements from collapsing? [duplicate]
  5. Center image using text-align center?
  6. Why do browsers match CSS selectors from right to left?
  7. How to remove margin space around body or clear default css styles
  8. CSS content property: is it possible to insert HTML instead of Text?
  9. background: fixed no repeat not working on mobile
  10. Creating a Zoom Effect on an image on hover using CSS?
  11. avoid page break inside row of table
  12. text-overflow: ellipsis not working
  13. Scale image to fit a bounding box
  14. How to change the size of the radio button using CSS?
  15. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  16. Same height column bootstrap 3 row responsive
  17. Making an svg image object clickable with onclick, avoiding absolute positioning
  18. Insert HTML from CSS
  19. How to change the style of a ‘s label?
  20. CSS custom cursor doesn’t work in FF/Chrome
  21. Which elements support the ::before and ::after pseudo-elements?
  22. Flexbox with fixed header and footer and scrollable content
  23. Prevent a centered layout from shifting its position when scrollbar appears
  24. Darken CSS background image? [duplicate]
  25. How to stretch div height to fill parent div – CSS
  26. Styling the last td in a table with css
  27. vertical-align: middle doesn’t work
  28. In which order are CSS styles applied?
  29. Submit Button Image
  30. Targeting text nodes with CSS

Leave a Comment