Difference between pointer-events and cursor

Question

I recently came across pointer-events as a way to turn off the mouse changing on hover. I've always used cursor to disable this change.

So what's the difference between pointer-events and cursor?

Answer 1

The pointer-events property gives control over how an element can respond to touch or click events, while the cursor property just controls what the cursor should look like in that event.

i.e. cursor: pointer will show a pointer finger when you hover over the element... cursor: disabled will show a cross sign showing the element might be disabled.

pointer-events: none on the other hand, will make the element completely unresponsive to a hover or click.

CSS-tricks has a write up here: https://css-tricks.com/almanac/properties/p/pointer-events/