CSS Cursor Event Change

Question

I'm trying to make the cursor change on a specific event.. I don't know how to explain it but as an example, I want to change the cursor to progress when it's currently a pointer cursor (hovering links, buttons, else...) and I don't wanna type everything that has a pointer cursor like:

a, input[type='button'], button {
    cursor: progress;
}

All I want to do is replace the cursor when it's a pointer to a progress.
Is this even possible? Even if it requires JavaScript or anything! If it IS possible, then please help me, I'll accept an advice, too.

Thanks in advance~

Answer 1

It is unlikely that this is possible. The browser(I've only checked chrome) sets the style value of cursor to "auto" or "default". So even if you check the style of an element using javascript you won't be able to tell which cursor it is using unless you already specified it in your css.

You can test this with this jquery snippet:

javscript:

console.log($('button').css('cursor'));
console.log($('input[type="submit"]').css('cursor'));
console.log($('a').css('cursor'));

html:

<button>TEST</button>
<input type="submit"/>
<a href="#">TEST</a>

Answer 2

Is this what you are looking for?

a:hover,
button:hover,
input[type="button"] {
  cursor: wait;
}