[分享]css不让点击底层的div

CSS可以帮助我们实现很多视觉效果，比如让一些元素不可点击。有时候，我们会在一个div上叠加一个透明的层，以实现一些特殊的视觉效果，但是这样会导致底层的元素无法被点击。解决这个问题的方法很简单，我们只...

CSS可以帮助我们实现很多视觉效果，比如让一些元素不可点击。有时候，我们会在一个div上叠加一个透明的层，以实现一些特殊的视觉效果，但是这样会导致底层的元素无法被点击。

解决这个问题的方法很简单，我们只需要使用CSS的pointer-events属性，将其设置为none，就可以禁用元素的“鼠标事件响应”，从而让底层的元素可以被点击了。

.overlay {
  position: absolute; /* 将遮罩层定位至元素的绝对位置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置遮罩层为半透明 */
  pointer-events: none; /* 禁用鼠标事件响应 */
} 

上述代码中，我们创建了一个遮罩层，并将其设置为绝对定位。接着，我们使用了rgba颜色模式，将遮罩层设置为半透明，并将pointer-events属性的值设置为none。这样，我们就成功地将遮罩层禁用了鼠标事件响应。

最后再提醒一下，这个方法只适用于支持CSS3的浏览器，如果你需要兼容较老的浏览器，建议使用JavaScript实现。