With CSS is it possible to change the cursor more than once when interacting with the element?

Question

I have an element that will can be moved by the screen.

So thinking about ux/ui I wish I could give two feedbacks for the user. In the first case it places the mouse over the element, and in the second case it holds and drags the element. Notice that in the image below you have the "little hand" and then the "little hand" closed.

Here’s a basic example.

OBS: Note that I used 2x cursor. For the first is the fallback of the second. For example, if Firefox does not recognize the -webkit-grab will use the pointer. Already for when to drag in the case of Firefox the idea would be to have as fallback of pointer the w-resize.

$(function () {
  $("#draggable").draggable();
});

#draggable {
  width: 50px;
  height: 50px;
  padding: 0.5em;
  background-color: red;
  cursor: pointer;
  cursor: -webkit-grab;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="draggable" class="ui-widget-content"></div>

Answer 1

With CSS even, :active would not solve?

$(function () {
  $("#draggable").draggable();
});

#draggable {
  width: 50px;
  height: 50px;
  padding: 0.5em;
  background-color: red;
  cursor: pointer;
  cursor: -webkit-grab;
}

#draggable:active{
  cursor: grabbing;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="draggable" class="ui-widget-content"></div>