html - 由于背景图片，链接不起作用

Question

由于某种原因，我的链接无法点击。我猜这是因为背景的原因，因为当我把它取下来时，它们就会起作用。但我不确定这是为什么。背景在css中设置:

div::after {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    content: "";
    display: block;
    position: fixed;
    background: url(brain.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    opacity: 0.1;
}

nav.horizontal li {
    width: 10.66%;
    margin: 0;
    padding: 0;
    font-size: 12pt;
}


nav ul {
    list-style: none;
    margin: 0 5px;
    margin-right: 19px;
    padding-top: 10px;
    padding-bottom: 46px;
}

导航的 html:

<nav class="horizontal">
    <ul>
        <li><a href="sitemap.html">Sitemap</a></li>
        <li><a href="formpage1.html">Quiz page 1</a></li>
    </ul>
</nav>

Answer 1

::after 可能会阻止点击，请尝试在此处添加 pointer-events: none; div::after {...}

div::after {
  pointer-events: none;
  min-height: 100%;
  min-width: 1024px;

  width: 100%;
  height: auto;


  top: 0;
  left: 0;
  content: "";
  display: block;
  position: fixed;
  background: url(brain.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  opacity: 0.1;

}