不能单击带跨度的锚标记。

Question

我不能点击那个锚。我尝试了几种可能的解决方案，比如在这个锚点内外添加另一个锚或div，添加一个z索引和位置。编辑：，我添加了完整的代码，我意识到z索引必须解决这个问题。然而，我无法找到在哪里和如何使用z索引.

​

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100&display=swap');

* {
    scroll-behavior: smooth;
    text-decoration: none;
}

div, section {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    font-family: 'Catamaran', sans-serif;
}

main {
    pointer-events: none;
    height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: -1;
}

.hi, .name {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 170px;
    color: #fff;
    height: fit-content;
    position: absolute;
}

.hi {
    top: 2%;
    left: 5%;
    text-shadow: 1px 1px 15px rgba(0,0,0,0.83);
}

.name {
    right: 7%;
    top: 18%;
}

.me {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 60px;
    color: #fff;
    height: fit-content;
    position: absolute;
    bottom: 2%;
    left: 5%;
    text-shadow: 1px px 15px rgba(0,0,0,0.83);
}

.background-text {
    width: fit-content;
    background: #12c2e9;
    background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
    background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.img-me {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.img-me img {
    height: 82vh;
}

.slide-down {
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
}

.mouse-btn {
    margin: 10px auto;
    width: 40px;
    height: 80px;
    border: 3px solid rgba(122, 122, 124, 0.918);
    border-radius: 20px;
    display: flex;
  }
  
.mouse-scroll {
    width: 20px;
    height: 20px;
    background: linear-gradient(170deg, rgba(122, 122, 124, 0.918), rgb(123, 124, 124));
    border-radius: 50%;
    margin: auto;
    animation: scrolling13 1.5s linear infinite;
}
  
@keyframes scrolling13 {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    75% {
        opacity: 1;
        transform: translateY(18.5px);
    }

    80% {
        opacity: 0.5;
        transform: translateY(18.8px);
    }

    84% {
        opacity: 0.4;
        transform: translateY(19px);
    }

    88% {
        opacity: 0.3;
        transform: translateY(19.2px);
    }

    92% {
        opacity: 0.2;
        transform: translateY(19.4px);
    }

    95% {
        opacity: 0.1;
        transform: translateY(19.6px);
    }

    98% {
        opacity: 0;
        transform: translateY(19.8px);
    }
    
    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}

<main>
        <div class="hi">hi</div>
        <div class="name background-text">I am<br>Eren</div>
        <div class="me">A freelancer<br>developer<br>and a student</div>
        <div class="img-me"><img src="img/businessman-chatting-on-phone.png" alt="Young Man Chatting on Phone Illustration"></div>
        <a href="https://www.youtube.com/" class="slide-down">
            <span class="mouse-btn">
                <span class="mouse-scroll"></span>
            </span>
        </a>
</main>

​

Answer 1

如果你移除这些：

• pointer-events: none;
• z-index: -1;

链接变得可点击。

pointer-events: none;忽略事件。由于忽略了单击事件，单击锚元素什么也不做。

z-index: -1;将main元素放在body元素后面。如果将pointer-events: none;从main移动到body，则锚元素可以单击。body元素就像main前面一堵看不见的墙。您单击的是body元素，而不是main元素中的任何内容。

Answer 2

如果它内部没有文本，则无法单击它，请尝试如下：

-First

删除现有的Anchor元素。

-第二

向父Span元素添加一个id属性，其值为锚(或任何您喜欢的id名称)。

-第三代:

const anchorSpan = document.getElementById("anchor")
anchorSpan.addEventListener("click",()=>{
  createAnchorTage().click()
})
function createAnchorTage(){
  const anchorElement = document.createElement("a")
  anchorElement.href= "https://youtube.com"
  return anchorElement
}

希望这会有所帮助:)。

PS:我试过你的代码，它点击了，所以它可以被点击没有文字，我不知道有什么问题。