2013-07-05 3 views
1

Как я могу поместить элемент - например, сложный курсор, непригодный для свойства cursor - относительно позиции мыши с помощью CSS 3?Элемент позиции относительно курсора с использованием чисто CSS3

Я знаю, как это сделать с помощью JavaScript, но он кажется слишком изменчивым; Я бы предпочел использовать CSS и вернуться к jQuery, когда не хватает поддержки. (Событие, когда я работаю с элементами напрямую и обходит jQuery, он слишком медленный.)

JavaScript может использоваться для подготовки и при необходимости. Хотя предпочтительнее для принципала, JavaScript допустим, если он не отвечает за обновление элемента каждый раз, когда движется мышь.

Я прошу, чтобы ответы не использовались, чтобы понять, почему этого не может быть достигнуто, поскольку CSS быстро развивается, и будущий потенциал решения этой проблемы может измениться. Не стесняйтесь размышлять о всех, что вы хотите в комментариях.

Я использую Sass (SCSS) с Compass и jQuery вместе со своей собственной инфраструктурой JavaScript.

+0

Вы ищете функциональность drag + drop или что-то еще? D + D является частью спецификации HTML5 и должен быть довольно легко работать. Это потребует некоторого JS, но не должно быть «изменчивым». В любом случае, даже в случае отсутствия нативного D + D то, что вы просите, должно быть возможным, не будучи «изменчивым»; если он изменчив, вам стоит подумать о том, чтобы выполнить анализ производительности вашего JS-кода. Скорее всего, у вас есть события, которые увольняются неоднократно, когда вы двигаете мышь, которая пытается сделать слишком много работы. – Spudley

+0

Я использую это, чтобы значок загрузки следовал за курсором во время запроса ajax. По спецификациям дизайна он должен быть отделен от кузовов - это не зависит от меня. Если вы можете взломать API-интерфейс drag-n-drop, чтобы заставить его следовать курсору, это будет работать нормально. События тщательно контролируются и только увольняются, когда это абсолютно необходимо. '$ (window) .on ('mousemove', ...)' - это единственный соответствующий код, и он продолжает обработку до простого обновления позиции, даже никаких вычислений. Все это 'off()' 'd, когда больше не используется. – Zenexer

+0

@Spudley Я посмотрел API перетаскивания. Это довольно близко, но, к сожалению, он позволяет только изображению следовать курсору. Мне нужно что-то более сложное, поскольку я работаю со списком спрайтов. – Zenexer

ответ

0

На сегодняшний день CSS не поддерживает элементы позиционирования относительно указателя мыши.

Так что если вас не устраивает cursor: url('pointer.cur') (спасибо @ ilya-streltsyn), тогда JavaScript является единственным решением для вас.

Возможно, вы не должны этого делать в первую очередь. Когда SWF использует пользовательский курсор, это меня сильно измучивает.

+2

Это не совсем так. Пользовательские изображения в качестве курсоров мыши допускаются как [CSS 2.1] (http://www.w3.org/TR/CSS21/ui.html), так и модулем CSS3 UI. Но есть некоторые проблемы в поддержке браузером этой функции: http://quirksmode.org/css/user-interface/cursor.html#t017 –

+0

Спасибо @IlyaStreltsyn, я обновил свой ответ в соответствии с вашей коррекцией. –

+0

Это не совсем так. Я уже могу подумать о нескольких способах злоупотребления ': hover' для позиционирования относительно курсора мыши; они просто не элегантные или реалистичные решения по сравнению с JavaScript. Я знаю, что нет прямой поддержки элементов позиции относительно курсора в CSS; об этом уже сказано в вопросе. – Zenexer

Смежные вопросы