我给封面加了个图片遮罩层，然后a链接被图片挡住了，点不动。原因是父元素把子元素遮住了，无法触发a标签的点击事件。

我知道的有三种解决方法

  • 通过z-index属性
1
2
3
4
#site_social_icons {
  position: relative;
  z-index: 4;
}

不过这样做会遮罩层到下面去就失去了美化的作用。

  • 用js脚本阻止默认事件

本来想这么做的，但发现遮罩层是伪元素实现的，伪元素不是DOM元素，无法响应事件，要么不用伪元素（不要把简单的事情复杂化）

  • 用css3的属性pointer-events实现

最简单的解决办法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*置顶封面美化*/

.full_page::before {
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background-attachment: fixed;
  background-image: url(https://cdn.jsdmirror.com/gh/btkrc/artimg@main/resource/img/dot.gif);
}