使按钮与div可点击重叠

Question

我不知道这个效果叫什么，但是这张图片最适合你的铃声。

你能看到任务（菜单中的最后一项）吗？当你滚动并且菜单元素向下时，它们看起来就像正在淡入主div。

好吧，截图是我到目前为止所做的：

#mainMenu #menuList {
      width: inherit;
      min-width: 218px;
      margin: 65px 0 46px 0;
      position: absolute;
      top: 0; left: 0; bottom: 0;
      overflow-y: auto;
      overflow-x: hidden;
      text-align: left;
   }

   #mainMenu #menuList:before {
      content: "";
      width: inherit;
      height: 40px;
      position: fixed; top: 60px;
      background: rgba(19,28,38,1);
      background: -moz-linear-gradient(top, rgba(19,28,38,1) 0%, rgba(19,28,38,1) 5%, rgba(19,28,38,0) 100%);
      background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,28,38,1)), color-stop(5%, rgba(19,28,38,1)), color-stop(100%, rgba(19,28,38,0)));
      background: -webkit-linear-gradient(top, rgba(19,28,38,1) 0%, rgba(19,28,38,1) 5%, rgba(19,28,38,0) 100%);
      background: -o-linear-gradient(top, rgba(19,28,38,1) 0%, rgba(19,28,38,1) 5%, rgba(19,28,38,0) 100%);
      background: -ms-linear-gradient(top, rgba(19,28,38,1) 0%, rgba(19,28,38,1) 5%, rgba(19,28,38,0) 100%);
      background: linear-gradient(to bottom, rgba(19,28,38,1) 0%, rgba(19,28,38,1) 5%, rgba(19,28,38,0) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131c26', endColorstr='#131c26', GradientType=0 );
   }

   #mainMenu #menuList:after {
      content: "";
      width: inherit;
      height: 40px;
      position: fixed; bottom: 45px;
      background: rgba(19,28,38,0);
      background: -moz-linear-gradient(top, rgba(19,28,38,0) 0%, rgba(19,28,38,1) 95%, rgba(19,28,38,1) 100%);
      background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,28,38,0)), color-stop(95%, rgba(19,28,38,1)), color-stop(100%, rgba(19,28,38,1)));
      background: -webkit-linear-gradient(top, rgba(19,28,38,0) 0%, rgba(19,28,38,1) 95%, rgba(19,28,38,1) 100%);
      background: -o-linear-gradient(top, rgba(19,28,38,0) 0%, rgba(19,28,38,1) 95%, rgba(19,28,38,1) 100%);
      background: -ms-linear-gradient(top, rgba(19,28,38,0) 0%, rgba(19,28,38,1) 95%, rgba(19,28,38,1) 100%);
      background: linear-gradient(to bottom, rgba(19,28,38,0) 0%, rgba(19,28,38,1) 95%, rgba(19,28,38,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131c26', endColorstr='#131c26', GradientType=0 );
   }

      #mainMenu #menuList a {
         color: #596B80;
         display: block;
         padding: 8px 15px;
      }

      #mainMenu #menuList a:hover {
         color: #B3C3D5;
      }

      #mainMenu #menuList a.active,
      #mainMenu #menuList a.active:hover {
         color: #18BC9A;
      }

HTML

<div id="menuList">
      <a <?php href('index.php');?>><i class="icon-arrow-left"></i>Dashboard</a>
      <a <?php href('members.php');?>><i class="icon-arrow-left"></i>Members</a>
      <a <?php href('projects.php');?>><i class="icon-arrow-left"></i>Projects</a>
      <a <?php href('tasks.php');?>><i class="icon-arrow-left"></i>Tasks</a>
   </div>

现在的问题是，你很可能注意到我正在使用渐变的DIV并将div放在最底层的主菜单上方。

所以现在，我无法点击这些按钮！如何才能实现相同的结果但是可以点击按钮？

Answer 1

您需要将pointer-events:none;分配给重叠的div，然后才能点击