链接由于背景图片而无法正常工作

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;

}

Answer 2

将样式应用于“ div”而不是“ div :: after”

首选代码段：

div {

  min-height: 100%;
  min-width: 1024px;

  width: 100%;
  height: auto;


  top: 0;
  left: 0;
  content: "";
  display: block;
  position: fixed;
   background: url('https://cdn.britannica.com/s:300x300/07/1907-004-5162F5E4.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  opacity: 0.5; 

}


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;
}

<div>

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