代码示例

鼠标

禁用元素

disabled元素应当在鼠标样式上有所体现。

:disabled,
[disabled],
[aria-disabled="true"] {
  cursor: not-allowed;
}

隐藏鼠标

必要时可设置鼠标为none隐藏。

video {
  cursor: none;
}

拓展可点击区域

可用透明边框扩展出点击区域解决问题。

缺点：边框会影响布局和周边元素的相对位置！

button {
  // 不要忘记设置背景的可视范围
  background-clip: padding-box;

  border: 10px solid transparent;

  // 加阴影时，必须用内置 box-shadow 了
  box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
}

优化解法的原理：用伪元素生成一个透明的遮罩，依然可以相应父元素的事件。

button {
  position: relative;
}

button::before {
  content: '';
  position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}

遮罩

蒙版遮罩

给弹了遮罩层的 body 元素加一个伪元素

body.dimmed::before {
  position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    // 根据系统的实际情况设置
    z-index: 1;

  background: rgba(0, 0, 0, 0.8);
}

问题：无法在伪元素上绑定 JavaScript 事件，但可以通过检测点击的范围解决（应当是目前比较好的解决方案）。

第二种方法：为弹层添加box-shadow。

缺点：

  1. 如果页面很长，一滚动就现原形，因此只适用于position: fixed的元素。
  2. box-shadow无法捕获鼠标事件
.modal {
  box-shadow: 0 0 0 50vmax rgba(0, 0, 0, 0.8);
}

毛玻璃遮罩

添加blur等滤镜。

body {
  transition: 0.6s filter;
}

body.dimmed {
  // 同时降低亮度和饱和度
  filter: blur(3px) contrast(.8) brightness(.8);
}