css style mouse clicks can not

Style when the mouse is not clicking

cursor:not-allowed;

Results as shown:

 It should be noted that, although the style show is not clickable, but click will trigger the corresponding event.

 

 

Prohibit the triggering event

pointer-events:none;

Using this style, it will prevent the triggering event. Mouse appears as an arrow style;

 

 

If you use both styles, it will prevent the triggering event, but the mouse does not as we want to show disabled style, but display an arrow style.

So when we achieve results, you can use the cursor: not-allowed; then use js code to prevent triggering event;

cursor:not-allowed;
pointer-events:none;