如何实现点击圆形导航项任意区域均可跳转至目标页面？

问题分析 #

当前导航栏的圆形<li>项中，只有<a>标签包裹的文字区域能触发跳转——因为<a>默认是行内元素，仅占据文字空间。要实现点击圆形任意区域都跳转，需要让<a>标签占满整个<li>的空间。

解决方案 #

仅需修改CSS，让<a>标签成为块级元素并填充整个<li>的宽高，同时继承圆形的圆角样式，确保点击区域和视觉区域完全匹配。

修改后的代码 #

完整CSS代码（新增了针对.special2 a的样式）

@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@300&display=swap");

body {
  height: 100vh;
  background: rgb(221, 221, 221);
  font-family: "Barlow Semi Condensed", sans-serif;
  background-color: rgb(0, 0, 0);
  background-image: radial-gradient(at 16% 92%, rgb(8, 145, 178) 0, transparent 55%), radial-gradient(at 49% 99%, rgb(220, 38, 38) 0, transparent 21%), radial-gradient(at 31% 2%, rgb(219, 39, 119) 0, transparent 65%);

}

nav {
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100vw;
  justify-content: center;
}

ul {
  display: flex;
  justify-content: space-evenly;
}

li {
  list-style: none;
  width: 10em;
  height: 10em;
  border-radius: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.special2 {
  border: 5px solid white;
  margin: 10px;
  transition: 0.5s;
}

.special2:hover {
  transform: translateY(-10px);
}

/* 新增：让a标签占满整个圆形区域 */
.special2 a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit; /* 继承父元素的圆角，保持圆形 */
  display: flex;
  align-items: center;
  justify-content: center; /* 维持文字居中排版 */
}

.special {
  width: 15em;
  background: none;
  border: none;
  color: white;
  border-radius: 5px;
}

#organ {
  background-image: url(/images/cells.avif);
  background-size: cover;
}

#micro {
  background-image: url(/images/micro.jpg);
  background-size: cover;
  background-position: bottom;
}

label {
  font-size: 50px;
}

a {
  text-decoration: none;
  color: white;
}

.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: "Barlow Semi Condensed", sans-serif;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
}

HTML部分（无需修改，保持原结构）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>BioSite | Navigation</title>
  </head>
  <body>
    <nav>
      <ul>
        <li class="special"><label>BIOSITE</label></li>
        <li class="special2" id="organ"><a href="/pages/organ.html">ORGAN SYSTEMS</a></li>
        <li class="special2" id="micro"><a href="/pages/micro.html">MICROORGANISMS</a></li>
      </ul>
    </nav>
  </body>
</html>

原理说明 #

• 设置<a>为块级元素并宽高100%，使其完全覆盖父元素<li>的空间
• border-radius: inherit让<a>继承<li>的圆形圆角，确保点击区域和视觉圆形完全一致
• 用flex布局保持文字在圆形内垂直水平居中，不破坏原有排版

内容的提问来源于stack exchange，提问作者Phenomenal Panther