Question

首先，我尝试过：

指针事件：全部；

将锚标记移动到导航栏，效果很好！？

删除所有头版CSS的CSS也可以使其正常工作。

我认为我与职位有关：相对/绝对，但是，我需要职位，而且我不知道该如何处理，谢谢。

.front-page{
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #ffffff;
   background-image: url("https://www.transparenttextures.com/patterns/wall-4-light.png");
   z-index: -10;

   &__welcome-text{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      font-size: 40px;
      font-family: 'Playfair Display', serif;
      color: $textColorDark;
      text-align: left;

      & .anchor{
         cursor: pointer;
         z-index: 9999;
      }
   }
}

.right-arrow{
   color: $primary-color;
   font-size: 30px;
   opacity: 1;
   text-shadow: 1px 1px 8px rgba(0, 0, 0, .5);
   animation-name: delay;
   animation-duration: 6s;
}

@keyframes delay{
   0%{
      opacity:0;
   }

   85%{
      opacity:0;
   }

   90%{
      opacity:1;
      transform: translateX(0);
   }

   95%{
      transform: translateX(25px);
   }

   100%{
      opacity:1;
      transform: translateX(0);
   }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <link href="https://fonts.googleapis.com/css?family=Work+Sans|Playfair+Display|Montserrat" rel="stylesheet">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
      <link rel="stylesheet" href="css/style.css">
      <title>KW Web Development</title>
   </head>
   <body>
      <!-- HEADER -->
      <nav class="navbar">
         <div class="navbar-link__container">
            <a class="navbar-link" href="about.html"><span class="navbar-link-text about-link__animate">About</span></a>
            <a class="navbar-link" href="portfolio.html"><span class="navbar-link-text portfolio-link__animate">Portfolio</span></a>
            <a class="navbar-link" href="blog.html"><span class="navbar-link-text blog-link__animate">Blog</span></a>
            <a class="navbar-link" href="contact.html"><span class="navbar-link-text contact-link__animate">Contact</span></a>
         </div>
      </nav>


         <div class="main-logo__container">
            <a href="#"><div class="main-logo">
               <img class="main-logo__image" src="images/main-logo.png" alt="Main Logo">
            </div></a>
         </div>



         <!-- WELCOME MESSAGE -->
         <div class="front-page">
            <div class="front-page__welcome-text">
               <h1 class="front-page__welcome-text">Hi ;)<br> I'm Kevin,<br>
                I create modern websites <i class="fas fa-arrow-right right-arrow"></i>
             </h1> <br> <br> <br> <br>
               <a class="anchor" href="about.html">hello</a>
            </div>
         </div>


   </body>
</html>

Answer 1

删除z-index: -10;类上的.front-page。它什么也没做，这就是问题的原因。

锚标签不可点击

1 个答案: