给html元素设置的禁用效果

日常创作项目中我们经常用到button按钮或者是input，他们都可以使用disabled来控制是否是禁用效果，那么如果是其他的html元素该怎么做出禁用效果呢。

cursor: not-allowed属性可以让我们得元素看起来有禁用得效果 ，但事件还是可以触发的，这个时候需要自行用条件判断事件是否触发。

如果没有太多的样式方面需求可以直接使用cursor: not-allowed。

如果我们想要类似与按钮禁用得效果，我们可以在元素中加一个定位盒子，然后给这个定位盒子加上cursor: not-allowed
在通过其他属性将这个定位盒子设置成类似遮罩层得样式。
直接上代码

<div className={styles.disable_box}>
   这是一个被禁用得div
   <div className={styles.modal_box}></div> //用来做禁用效果
 </div>

然后设置它的css样式

.disable_box {
  margin-left: 40px;
  margin-top: 40px;
  width: 300px;
  height: 400px;
  position: relative;
  box-shadow: 0 5px 10px 0 rgb(173 208 255 / 35%);
  border-top: 1px solid blue;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  color:orange;
    .modal_box {
	   position: absolute;
	   width: 100%;
	   height: 100%;
	   top: 0;
	   left: 0;
	   cursor: not-allowed;
	   background: rgba(255,255,255,.4)
	 }
 ｝

我们给类名为modal_box得盒子设置了背景透明色，由于定位的原因让这个盒子遮住了整个大盒子成为了一个遮罩层形式的元素，这样看起来有一种朦胧感，更趋向我们想要的禁用效果，但是事件是否执行还是要自己去根据条件判断的。