How to implement non-clickable functional styles in css

Implementation method: 1. Directly add the "pointer-events:none;" style to the element to prohibit triggering events and make it non-clickable. 2. First add the "cursor:not-allowed;" style to the element; then use js code to prevent the click event from being triggered, making it non-clickable.

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

Style when the mouse is not clickable

cursor:not-allowed;

The effect is as follows:

It should be noted that, although The style is not clickable, but clicks will still trigger the corresponding event.

Prohibit triggering events

pointer-events:none;

Using this style will prevent the event from being triggered. The mouse will be displayed in an arrow style;

If these two styles are used at the same time, the triggering of the event will be prevented, but the mouse will not be displayed in a disabled style as we want. Instead, it appears as an arrow style.

So when we implement the effect, we can use cursor:not-allowed; and then use js code to prevent the event from being triggered;

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

(Learning video sharing: css video tutorial)

The above is the detailed content of How to implement non-clickable functional styles in css. For more information, please follow other related articles on the PHP Chinese website!