Как принудительно изменить стиль курсора в браузере ⇐ CSS
-
Anonymous
Как принудительно изменить стиль курсора в браузере
Есть ли способ заставить курсор принять определенный стиль, например захват, перемещение и т. д.? И под словом «сила» я имею в виду СИЛУ! Не имеет значения, перетаскиваю ли я что-то в данный момент или нахожусь над определенным элементом, или мой курсор в данный момент завтракает. Мне нужен способ указать курсору, как он должен выглядеть, потому что все остальное у меня не работало, потому что кажется, что у меня есть какой-то странный крайний случай, которого никогда не было ни у кого во всемирной паутине.
Нет также является приемлемым ответом. В таком случае я просто уйду с работы.
Подробнее: При перетаскивании я копирую свой элемент. Этот клон должен следовать за моим курсором. Я делаю это, устанавливая «позиция: абсолют» для клона и влево и вправо при событии «перетаскивания». Проблема в том, что этот клон не является целью события, и по этой причине селектор CSS «:active» не применяется (по крайней мере, я думаю, что в этом проблема).
Код:
onCursorMove(cursorMove: DragEvent) { const x = курсорMove.clientX; const y = курсорMove.clientY; this.cloneElement!.style.left = x-this.offsetX!+'px'; this.cloneElement!.style.top = y-this.offsetY!+'px'; } onDragStart (событие: DragEvent) { const element = event.target как HTMLElement; константный прямоугольник = element.getBoundingClientRect(); const dragElement = element.cloneNode(true) как HTMLElement; document.getElementById('main-content')!.appendChild(dragElement); //основное содержимое имеет тот же размер, что и тело dragElement.style.width=rectangle.width+'px'; dragElement.style.minWidth=rectangle.width+'px'; dragElement.style.height=rectangle.height+'px'; dragElement.style.minHeight=rectangle.height+'px'; dragElement.style.position="абсолютный"; dragElement.style.display='block'; dragElement.style.cursor='переместить'; dragElement.setAttribute('id', 'dragHoverElement'); this.cloneElement = dragElement; document.addEventListener("drag", (ev) => this.onCursorMove(ev)); }
Есть ли способ заставить курсор принять определенный стиль, например захват, перемещение и т. д.? И под словом «сила» я имею в виду СИЛУ! Не имеет значения, перетаскиваю ли я что-то в данный момент или нахожусь над определенным элементом, или мой курсор в данный момент завтракает. Мне нужен способ указать курсору, как он должен выглядеть, потому что все остальное у меня не работало, потому что кажется, что у меня есть какой-то странный крайний случай, которого никогда не было ни у кого во всемирной паутине.
Нет также является приемлемым ответом. В таком случае я просто уйду с работы.
Подробнее: При перетаскивании я копирую свой элемент. Этот клон должен следовать за моим курсором. Я делаю это, устанавливая «позиция: абсолют» для клона и влево и вправо при событии «перетаскивания». Проблема в том, что этот клон не является целью события, и по этой причине селектор CSS «:active» не применяется (по крайней мере, я думаю, что в этом проблема).
Код:
onCursorMove(cursorMove: DragEvent) { const x = курсорMove.clientX; const y = курсорMove.clientY; this.cloneElement!.style.left = x-this.offsetX!+'px'; this.cloneElement!.style.top = y-this.offsetY!+'px'; } onDragStart (событие: DragEvent) { const element = event.target как HTMLElement; константный прямоугольник = element.getBoundingClientRect(); const dragElement = element.cloneNode(true) как HTMLElement; document.getElementById('main-content')!.appendChild(dragElement); //основное содержимое имеет тот же размер, что и тело dragElement.style.width=rectangle.width+'px'; dragElement.style.minWidth=rectangle.width+'px'; dragElement.style.height=rectangle.height+'px'; dragElement.style.minHeight=rectangle.height+'px'; dragElement.style.position="абсолютный"; dragElement.style.display='block'; dragElement.style.cursor='переместить'; dragElement.setAttribute('id', 'dragHoverElement'); this.cloneElement = dragElement; document.addEventListener("drag", (ev) => this.onCursorMove(ev)); }
Мобильная версия