Пользовательская точка курсора курсора CSS

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

Ответы

Ответ 1

CSS3 поддерживает настройку средней точки изображения курсора, где горячая точка указателя (то есть точка, в которой клики зарегистрированы):

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

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

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

Ответ 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

Ответ 3

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

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

Однако есть несколько особенностей, которые нужно учитывать, что затрудняет работу с кросс-браузером.

Главное, что Internet Explorer требует, чтобы курсор находился в формате ".cur", в то время как другие браузеры требуют его в стандартном формате изображения (например, ".gif" ). Если вы хотите поддерживать все браузеры, вам нужно будет создать оба и написать код, специфичный для браузера.

Похоже, он вообще не работает в Opera.

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