如何使div下方的链接可点击答案

【问题标题】：How to make a link beneath a div clickable如何使div下方的链接可点击
【发布时间】：2016-08-02 00:52:36
【问题描述】：

我在一个 div 下有一个链接，其高度和宽度为 100%，位置固定，z-index：5。我需要将此 div 保留在我的链接上方，但该链接不起作用。我可以使链接正常工作，但将此 div 保留在我的链接上方吗？

div {
  background:grey;
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  opacity:0.5;
  z-index:5
}

a {
  font-size:50px;
  z-index:0
}

<a href="http://google.com"> My link</a>

<div></div>

【问题讨论】：

您不能这样做，但您可以将a 设置为display: block; 并将其用作div。
stackoverflow.com/questions/3680429/…

标签： html css hyperlink z-index

【解决方案1】：

您可以将pointer-events:none; 添加到您的 div 的 CSS 规则中

div {
  background:grey;
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  opacity:0.5;
  z-index:5;
  pointer-events:none;
}

a {
  font-size:50px;
  z-index:0;
}

<a href="http://google.com"> My link</a>

<div></div>

【讨论】：

【解决方案2】：

如果这个 div 的目的只是改变背景颜色，删除它并改为这样做会更容易：

body{
    background-color:lightgrey;
}

【讨论】：