CSS将自定义光标图像原点（热点）更改为中心

问题描述

我想为游标使用自定义图片。

这很好，但从我可以看到的 - 原点（箭头的尖端）

如何将原点设置为图像的中心。

以下是 演示此问题

  div 
 {
 width：600px; 
 height：100px; 
 background：pink; 
 cursor：url（http://placehold.it/50x30），auto 
} 
  

$ b b

请注意，当我尝试选择文本时，它会从图像的左上角选择。

解决方案

一种解决方案是移动图片的位置以匹配鼠标指针

  cursor：url（image） ]; 
  

不回答问题，但这是工作

HTML

;
height：100px;
background：pink;
cursor：url（http://placehold.it/50x30）25 15，auto;
}

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 fiddle to demonstrate the problem

div
{
    width: 600px;
    height: 100px;
    background: pink;
    cursor: url(http://placehold.it/50x30) , auto
}

Notice that when I try to select the text - it selects from the top-left of the image.

解决方案

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;
}

这篇关于CSS将自定义光标图像原点（热点）更改为中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！