超链接在基本 html 页面上不起作用

Question

我有下面这段代码，但链接不可点击：

<!DOCTYPE html>
<html>
<head>
  <style>
    .tilesWrap {
        padding: 0;
        list-style: none;
        text-align: center;
    }
    .tilesWrap li {
        display: inline-block;
        max-width: 90%;
        padding: 20px 60px 30px 60px;
        position: relative;
        vertical-align: top;
        margin: 10px;
        font-family: 'helvetica', san-serif;
        min-height: 10vh;
        background: #9AEAA0;
        border: 5px solid #16551B;
        text-align: left;
    }
    .tilesWrap li h2 {
        font-size: 80px;
        margin: 0;
        position: absolute;
        opacity: 0.2;
        right: 10px;
        transition: all 0.3s ease-in-out;
    }
    .tilesWrap li:hover h2 {
        top: 0px;
        opacity: 0.6;
    }
  </style>
</head>
<body>
 <div class="col-lg-12 col-md-6 col-sm-12 col-xs-12">
   <ul class="tilesWrap">
     <li>
       <h2 class="green">2022</h2>      
       <a href="may.html">May 2022</a>
       <br><a href="april.html">April 2022</a>
       <br><a href="march.html">March 2022</a>
     </li>
   </ul>
 </div>
</body>
</html>

谁能告诉我问题出在哪里？谢谢

Answer 1

如果您删除 <h2> 块的透明度，您会看到它出现在链接的顶部。如果您检查它的大小（例如使用开发工具），您还会看到它完全覆盖了链接：

这样可以防止点击链接。

解决方案很简单 pointer-events: none; 在您的 <h2> 块 上，以防止它捕获指针事件，包括点击（和悬停仍然有效！）。

<!DOCTYPE html>
<html>
<head>
  <style>
    .tilesWrap {
        padding: 0;
        list-style: none;
        text-align: center;
    }
    .tilesWrap li {
        display: inline-block;
        max-width: 90%;
        padding: 20px 60px 30px 60px;
        position: relative;
        vertical-align: top;
        margin: 10px;
        font-family: 'helvetica', san-serif;
        min-height: 10vh;
        background: #9AEAA0;
        border: 5px solid #16551B;
        text-align: left;
    }
    .tilesWrap li h2 {
        font-size: 80px;
        margin: 0;
        position: absolute;
        opacity: 0.2;
        right: 10px;
        transition: all 0.3s ease-in-out;
        pointer-events: none;
    }
    .tilesWrap li:hover h2 {
        top: 0px;
        opacity: 0.6;
    }
  </style>
</head>
<body>
 <div class="col-lg-12 col-md-6 col-sm-12 col-xs-12">
   <ul class="tilesWrap">
     <li>
       <h2 class="green">2022</h2>      
       <a href="may.html">May 2022</a>
       <br><a href="april.html">April 2022</a>
       <br><a href="march.html">March 2022</a>
     </li>
   </ul>
 </div>
</body>
</html>

超链接在基本 html 页面上不起作用

Hyperlink not working on a basic html page

html

css

hyperlink