CSS style: pointer-events: none

Little scum · Posted on 5/11/2020 5:55:25 PM

pointer-events: none 顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none 的作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。

As we all know, input[type=text|button|radio|checkbox] supports the disabled attribute, which can completely disable events. If other tags require a similar disabling effect, you can try pointer-events: none

Here's a simple example:

Login is visible.

You can't click on this link, and hover has no effect. (It is worth mentioning that just the mouse event is invalid, you can still select the link with the tab key, and then enter to open, at this time you can remove the href attribute of the A tag, so you can't let the tab key be selected)

The hyperlink login is visible.

The default values are:

Login is visible.

Little scum · Posted on 3/10/2021 11:30:59 AM

jQuery code

Login is visible.

[CSS/DIV] CSS style: pointer-events: none

Related Posts

Sections viewed