Change cursor from grab to grabbing while mouse is clicked down?

user_3606302 0
Viewed 1660

I have an element that can be moved/dragged and want the cursor to be set to grab while hovering over it and changed to grabbing when users click and hold the mouse down.

My current setup is almost identical to what is suggested in the most up-voted solution to this question. The problem is that the cursor doesn't change to grabbing until the user releases the mouse click (which was described in the comments of the linked posted, but no solution). Is there a way to change the state of the cursor when it is initially clicked until it is released?

Minimum reproducible example link

.outer-box {
  height: 250px;
  width: 250px;
  border: 2px solid black;
  cursor: grab;
}
.outer-box:active {
  cursor: grabbing;
}
<div class="outer-box"></div>

css html
1 Answers

What you can do is use the onmouseover, onmousedown, onmouseup, onmouseleave attributes, and connect them each to a function that changes to the specific type of cursor you need for each of these events

e.g.

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