Html CSS旋转使链接不可链接，除非双击

我似乎找不到导致我的链接只能点击白色部分的问题。这是一个“3D”按钮，我的意思是它是一个CSS旋转转换链接。我找不到任何解决方案，所以我正在寻求帮助

这是我的建议

HTML:

---

问题是，您正在将链接翻译出视图，因此无法单击：

nav ul li a:hover {
    background: #e9e9e9;
    color: #000;
    transform: rotateX(90deg) translateY(-22px);
}

这个问题的非常简单的解决方案是在

li

元素周围放置一个

a

元素，并将当前的

a

元素更改为

div

，如下所示：

这样，正在平移和旋转的

div

和

li

元素被可单击链接包围

<a href="#">
    <li>
        <div data-hover="Forums">Forums</div>
    </li>
</a>

然后添加

a

元素样式，以使一切顺利进行：

nav ul a {
    text-decoration: none;
}

---

这是.< /P>如果你想在文本中添加更多的可点击区域，考虑添加填充到你的或者包装在，而不是其他方法。谢谢你的帮助！我真的很感激。

<a href="#">
    <li>
        <div data-hover="Forums">Forums</div>
    </li>
</a>

* {
    box-sizing: border-box;
}

nav {
    background: #e9e9e9;
    margin: -1rem 0rem;
    z-index: 0;
}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 0.05rem;
}

nav ul li div {
    display: inline-block;
    padding: 1rem;
    color: #000;
    text-decoration: none;
    transition: transform 0.3s ease 0s;
    transform-origin: 50% 0px 0px;
    transform-style: preserve-3d;
}

nav ul li div.current {
    color: #ffc400;
}

nav ul li div:hover {
    background: #e9e9e9;
    color: #000;
    transform: rotateX(90deg) translateY(-22px);
}

nav ul li div::before {
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    padding: 4px 0px;
    text-align: center;
    line-height: 50px;
    background: none repeat scroll 0% 0% #ffc400;
    color: #FFF;
    content: attr(data-hover);
    transition: #ffc400 0.3s ease 0s;
    transform: rotateX(-90deg);
    transform-origin: 50% 0px 0px;
}

nav ul a {
    text-decoration: none;
}