如何用纯HTML/CSS实现容器内假按钮悬浮效果及全域点击跳转

核心需求 #

• 容器内任意区域（含内部按钮）点击后均触发同一链接跳转
• 仅使用HTML/CSS实现，不依赖JavaScript
• 鼠标悬浮假按钮时，按钮显示专属悬浮样式
• 鼠标悬浮容器其他区域时，按钮无悬浮效果
• 禁止用<a>标签嵌套容器（容器内将包含独立链接，<a>不支持嵌套），也不使用多个指向同一地址的<a>元素

已尝试方案及问题 #

最初采用「绝对定位<a>覆盖容器接收点击+div假按钮接收悬浮」的方案，但存在功能冲突：

尝试代码 #

.container {
  position: relative;
  width: 200px;
  height: 200px;
  padding: 16px;
  border: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  z-index: 1;
  width: min-content;
  height: min-content;
  padding: 8px;
  background: red;
  white-space: nowrap;
  color: white;
}

.button:hover {
  background: darkred;
  cursor: pointer;
}

a.cover {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

<div class="container">
  <a class="cover" href="#"></a>
  <div class="button">Dummy link</div>
</div>

问题点 #

• 满足悬浮效果需求，但点击假按钮无法触发下方<a>的跳转
• 给假按钮加pointer-events: none可传递点击，但会丢失悬浮效果
• 将<a>设为顶层可解决点击问题，但假按钮会被覆盖，无法接收悬浮事件
• 使用兄弟选择器关联容器悬浮与按钮样式，会导致容器任意区域悬浮都触发按钮效果，不符合需求

可行解决方案 #

通过给假按钮添加透明伪元素，实现「hover由按钮接收，点击事件穿透到<a>」的效果：

最终代码 #

.container {
  position: relative;
  width: 200px;
  height: 200px;
  padding: 16px;
  border: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  position: relative;
  z-index: 1;
  width: min-content;
  height: min-content;
  padding: 8px;
  background: red;
  white-space: nowrap;
  color: white;
  /* 按钮本身接收hover事件 */
  pointer-events: auto;
}

/* 伪元素覆盖按钮，传递点击事件到下方<a> */
.button::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.button:hover {
  background: darkred;
  cursor: pointer;
}

a.cover {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

<div class="container">
  <a class="cover" href="#"></a>
  <div class="button">Dummy link</div>
</div>

方案原理 #

1. 假按钮设置z-index:1，确保在<a>上方，能正常接收hover事件
2. 按钮的伪元素覆盖整个按钮区域，设置pointer-events:none，让点击事件穿透到下方的<a>元素
3. 绝对定位的<a>覆盖整个容器，接收所有区域的点击事件，保证容器任意位置点击都能跳转

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