Custom CSS cursor click point
CSS3 supports setting the midpoint of a cursor image, where the hotspot of the pointer (i.e. the point at which clicks are registered) is:
cursor: url(mycur.cur) 6 6, auto;
Where the two 6
values mean 6 pixels from the left and 6 pixels from the top respectively. The default hotspot is always the top left corner of your image, i.e. 0 0
.
Browser support for this feature may be rather poor though as it's a CSS3 feature, so it's not something you should rely on just yet. (That said, Firefox has supported it from version 1.5!) If a browser can't interpret the coordinates, the cursor
property will be ignored, so be careful.
CSS change custom cursor image origin (hotspot) to center
One solution would be to move the position of your image to match the mouse pointer
cursor: url(image) [x y|auto];
Doesn't respond to the question but this is working
HTML
div
{
width: 600px;
height: 100px;
background: pink;
cursor: url(http://placehold.it/50x30) 25 15, auto;
}
How to change the cursor into a hand when a user hovers over a list item?
In light of the passage of time, as people have mentioned, you can now safely just use:
li { cursor: pointer; }
Custom cursor interaction point - CSS / JQuery
You just need to provide the hotspot's <x>
and <y>
position in your CSS:
In your example, the center happens to be 24px in from the top/left (huge ass cursor lol)
cursor:url(http://www.seancannon.com/_test/sniper-scope.cur) 24 24,default;
http://jsfiddle.net/9kNyF/15/ see?
CSS Cursor pointer with SVG image
Your image is simply too large. Reduce the width
and height
to something less than 128px.
Icon size limits for cursors in CSS | MDN
...the limit of the cursor size is 128×128px. Larger cursor images are ignored.
Example:
cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' ...") 16 16, pointer;
https://jsfiddle.net/bx4og7n5/
Edit: Added hotspot (center coordinates) for the cursor (see Dennis Bauszus' comment)
css cursor url positioning
Yes - just supply the hotspot coordinates:
cursor: url("x.gif") 15 15, move;
However bear in mind that this will break some browsers. Ideally, you need:
cursor: url("x.cur"), move;
cursor: url("x.gif") 15 15, move;
Where x.cur
is a "proper" cursor file. If you need a program to make one, try RealWorld Cursor Editor.
Related Topics
Page-Break-* Doesn't Work on Google Chrome
Extracting Content in :After Using Xpath
Input[Type=Number] Placeholder Color in Ff29+
Do Ie Browsers (IE6, 7, 8) Support @Font-Face
Why Is a Pseudo-Class So Called
How to Draw a Trapezoid-Like Card
Css-Only Acrylic Material from Fluent Design System
Angular Material Side Bar with "Half" Side Mode
How to Reset CSS3 *-Transform: Translate(…)
Concatenate String and Var Less CSS
Multi-Column Issue with Horizontal Scroll
CSS Selectors - How to Select 'For' in CSS
Applying Webkit Transitions to Pseudo Elements
Is There a SASS Rule for Outputting a Descendant to the Root
CSS Selector for Class Descendant Within a Class
Differencebetween the Selectors ".Class.Class" and ".Class .Class"