参考链接:

CSS3 pointer-events:none应用举例及扩展

 

首先pointer-events在除去SVG中的应用只有两个值:AUTO | NONE

pointer-events:none

该属性可以让应用此属性的元素都会变成“真空”,比如:一个a连接上面覆盖一个div,当该div的css属性中有该属性时,该div就像不存在一样,可以直接点击到下方的a标签

这是一个很神奇的属性,Bootstrap就是利用这个属性,实现禁用控件的效果。

Bootstrap中实现禁用效果有两个方法:

方法1:在标签中添加disabled属性

方法2:在元素标签中添加类名“disabled”

两者的主要区别是:

“.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题,如果通过类名“.disable”来禁用按钮,其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
  -webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}

 

 

相关文章:

  • 2021-12-28
  • 2021-11-10
  • 2021-05-06
  • 2021-11-12
  • 2021-09-09
  • 2021-08-21
  • 2021-12-12
  • 2022-12-23
猜你喜欢
  • 2022-01-15
  • 2021-07-17
  • 2021-09-24
  • 2022-01-12
  • 2022-12-23
  • 2021-12-23
相关资源
相似解决方案