CSS 将自定义光标图像原点（热点）更改为中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19560878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS change custom cursor image origin (hotspot) to center
提问by Danield
I want to use a custom image for a cursor.
我想为光标使用自定义图像。
This is fine, but from what I can see - the origin (tip of arrow) is by default at the top-left point of my image.
这很好，但据我所知 - 原点（箭头尖端）默认位于图像的左上角。
How can I set the origin to be the center of my image.
如何将原点设置为图像的中心。
Here is a demo snippet to demonstrate the problem
这是一个演示片段来演示问题
div {
width: 600px;
height: 100px;
background: pink;
cursor: url(http://placehold.it/50x30), auto
}<div>the cat in the hat<br> the cat in the hat<br> the cat in the hat<br> the cat in the hat</div>Notice that when I try to select the text - it selects from the top-left of the image.
请注意，当我尝试选择文本时 - 它从图像的左上角进行选择。
回答by Romain
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
HTML
div
{
width: 600px;
height: 100px;
background: pink;
cursor: url(http://placehold.it/50x30) 25 15, auto;
}
回答by Igle
You can set it by:
您可以通过以下方式设置：
cursor:url(http://placehold.it/50x30) 25 15, auto;
The two parameters I added set the center of your cursor.
我添加的两个参数设置了光标的中心。
回答by Danield
I just found this from mozilla:
我刚刚从mozilla找到了这个：
Support for the CSS 3 syntax for cursor values got added in Gecko 1.8 (Firefox 1.5):
cursor: [ [
<x> <y>]?,]* keyword It allows specifying the coordinates of the cursor's hotspot, which will be clamped to the boundaries of the cursor image. If none are specified, the coordinates of the hotspot are read from the file itself (for CUR and XBM files) or are set to the top left corner of the image. An example of the CSS3 syntax is:
Gecko 1.8 (Firefox 1.5) 中添加了对光标值的 CSS 3 语法的支持：
cursor: [ [
<x> <y>]?,]* 关键字 它允许指定光标热点的坐标，该坐标将被夹在光标图像的边界上。如果未指定，则从文件本身（对于 CUR 和 XBM 文件）读取热点坐标或将其设置为图像的左上角。CSS3 语法的一个例子是：
.foo {
cursor: auto;
cursor: url(cursor1.png) 4 12, auto;
}
.bar {
cursor: pointer;
cursor: url(cursor2.png) 2 2, pointer;
}
/* fallsback onto 'auto' and 'pointer' in IE, but must be set separately */ The first number is the x-coordinate, and the second number is the y-coordinate. The example will set the hotspot to be the pixel at (4,12) from the top left (0,0).
/* 在 IE 中回退到 'auto' 和 'pointer'，但必须单独设置 */第一个数字是 x 坐标，第二个数字是 y 坐标。该示例将热点设置为左上角 (0,0) 处 (4,12) 处的像素。
