Пользовательский CSS курсор

Question

Как я могу дать пользовательскую точку щелчка курсорам, созданным cursor: url(theCursorUrl);? например Вы используете изображение руки (захват) для курсора. Но вы хотите, чтобы середина изображения была точкой, на которую указывает фактический курсор.

Answer 1

CSS3 поддерживает установку средней точки изображения курсора , где горячая точка указателя (т. Е. Точка, в которой регистрируются щелчки):

cursor: url(mycur.cur) 6 6, auto;

Где два *Значения 1006 * означают 6 пикселей слева и 6 пикселей сверху соответственно.Точка доступа по умолчанию всегда находится в верхнем левом углу изображения, т. Е. 0 0.

Поддержка этой функции в браузере может быть довольно слабой, хотя это функция CSS3, поэтому на нее не стоит полагаться,(Тем не менее, Firefox поддерживает его с версии 1.5!) Если браузер не может интерпретировать координаты, свойство cursor будет игнорироваться , поэтому будьте осторожны.

Answer 2

Это довольно деликатный вопрос, если вы хотите кросс-браузерную совместимость для своего пользовательского курсора (когда точка доступа находится не в верхнем левом углу). Во-первых, IE заставляет вас использовать формат .cur. Формат .cur также инкапсулирует положение горячей точки. Вы можете редактировать формат .cur (есть бесплатные инструменты, такие как Real World Cursor Editor), чтобы установить пиксель горячей точки. К сожалению, chrome по какой-то причине игнорирует инкапсулированную точку доступа в формате .cur и по умолчанию устанавливает 0, 0. Поэтому вы должны указать эти координаты, но это заставит IE игнорировать все свойство css ...

Мой подход при работе с пользовательскими курсорами с горячими точками, отличными от 0,0, таков:

Сначала установите пиксель горячей точки в желаемых координатах (9,7 в этом примере), используя редактор .cur. Затем используйте что-то вроде ниже. Это будет охватывать IE, FF и Chrome

cursor:url(mycursor.cur), default;
cursor:url(mycursor.cur) 9 7, default; /*chrome cursor hotspot fix - ignored by IE

Answer 3

CSS 3 позиционирования горячей точки, но это не поддерживается IE https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property

cursor: url(cursor.gif) 2 2, pointer;
property: url x-coordinate y-coordinate, fallback image;

Answer 4

Базовый синтаксис выглядит следующим образом:

cursor: url(image) [x y|auto];

Однако есть ряд особенностей, которые следует учитывать, что делает его довольно сложным для работы с кросс-браузером.Во-первых, Internet Explorer требует, чтобы курсор был в формате «.cur», в то время как в других браузерах он требуется в стандартном формате изображения (например, «.gif»).Если вы хотите поддерживать все браузеры, вам нужно будет создать оба и написать код для конкретного браузера.

В Opera это явно не работает.

QuirksmodeНа сайте есть полная информация обо всех странностях, которые можно ожидать.