2

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>
Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
userNick
  • 503
  • 4
  • 7
  • 25
  • 5
    I'm using Chrome: when I click on the element the cursor does change to grabbing. – Terry Apr 10 '20 at 21:07
  • @Terry right when you click, or after you've let go? – userNick Apr 10 '20 at 21:14
  • I've tried both FF and Chrome on my Mac, and get the grabbing state when the mouse is pressed down. I don't have to wait for release. – beltouche Apr 10 '20 at 21:16
  • @beltouch I moved my browser from my external monitor to my main screen and it worked! Must have something to do with the display. – userNick Apr 10 '20 at 21:25

1 Answers1

0

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";
}
j3ff
  • 5,719
  • 8
  • 38
  • 51
James Onashile
  • 31
  • 4