Переключить курсор с захвата на захват, когда мышь нажата?

Question

У меня есть элемент, который можно перемещать / перетаскивать, и я хочу, чтобы курсор был установлен на grab при наведении на него и изменился на grabbing, когда пользователи нажимают и удерживают кнопку мыши.

Мой текущая настройка почти идентична предложенной в решении с наибольшим количеством голосов на этот вопрос . Проблема в том, что курсор не меняется на grabbing до тех пор, пока пользователь не отпустит щелчок мышью (что было описано в комментариях к опубликованным ссылкам, но решения не найдено). Есть ли способ изменить состояние курсора при первоначальном щелчке до его отпускания?

Пример минимальной воспроизводимой ссылки

.outer-box {
  height: 250px;
  width: 250px;
  border: 2px solid black;
  cursor: grab;
}
.outer-box:active {
  cursor: grabbing;
}

<div class="outer-box"></div>

Answer 1

Что вы можете сделать, это использовать атрибуты onmouseover, onmousedown, onmouseup, onmouseleave и соединить их каждый с функцией, которая меняет тип указателя c, необходимый для каждого из эти события

например

function() {
  document.getElementByClass("outer-box").style.cursor = "pointer";
}