Member Avatar for manal

hi

how can I change the cursor's shape im my site

i found this

<A HREF="index.html" style="cursor:crosshair">home</a>

this change it when it moves over the link but i want the cursor to be like this always

thanx in advance

  • 2 Contributors
  • 1 Reply
  • 228 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by MattEvans

Dani AI

Generated

Short answer: yes — the pointer that appears while the mouse is over your page is controlled with CSS. is on the right track: the cursor property is inherited and applies to page elements, so placing a rule on a root-level element will keep that cursor active while the pointer is over your site. (developer.mozilla.org)

If you want a custom icon instead of a built‑in keyword, CSS accepts URL values with ordered fallbacks and optional hotspot coordinates (the pixel within the image that acts as the click point). Example pattern (use your own file paths and hotspot numbers):

html {
  cursor: url("/cursors/mytool.cur") 10 4, url("/cursors/mytool.png") 10 4, pointer;
}

The browser tries the first URL, then the next, and finally the keyword. Hotspot support and the exact syntax are part of the CSS UI spec. (w3c.github.io)

Practical caveats and troubleshooting: many browsers enforce size limits (large images are ignored or clipped — aim for ~32×32 for broad compatibility; some engines allow up to 128×128 but may still reject cursors that overlap native UI), and some engines block cross‑origin images as cursor sources. If a custom cursor won’t show, check the console for CORS/deprecation messages, host the image on the same origin or use a data URI, and always supply a keyword fallback. Also note mobile/touch environments won’t behave like desktop pointers (iPadOS has special pointer handling). (developer.mozilla.org)

Short checklist: test a small (32×32) cursor; prefer .cur for best Windows/IE support but PNG/SVG are broadly usable; include a keyword fallback; avoid changing cursors globally unless it improves affordance — unexpected cursors can hurt usability and accessibility. If a custom cursor still fails, try the data‑URI approach as a last resort:

html {
  cursor: url("data:image/png;base64,..."), auto;
}

(stackoverflow.com)

Member Avatar for MattEvans

Add some CSS a'la:

body
{
cursor:crosshair;
}

or, put it directly in the body tag:

<body style="cursor:crosshair;">
... body stuff ...
</body>

It should set the cursor how you want; while the mouse is over the browser window (or browser tab) that your page is open in.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.