为可点击容器创建“虚拟”按钮

Question

TL; DR：尝试在可点击容器中制作一个具有悬停效果的虚拟按钮。

前言：我正在寻找 HTML/CSS 解决方案ONLY（我已经知道如何使用 JS 做到这一点）。

我正在研究一个由容器和按钮链接组成的简单卡片设计。我希望整个容器充当链接，即用户可以单击容器内的任意位置以到达目的地。我的目标是使用多个 a 元素来做到这一点

而不

。

这张卡的行为要求是：

1. 用户将鼠标悬停在按钮上，他们会看到按钮的悬停效果。
2. 用户将鼠标悬停在容器上，他们在按钮上看不到悬停效果。
3. 用户单击容器内的任何地方（包括按钮），然后将他们带到链接的页面。

---我尝试过的东西----

为了避免多个

a

元素或将整个容器包装在

a

元素中，我采用了以下方法：

• 我绝对定位了真正的

  a

  元素以接受来自容器内任何位置的点击。

• 我创建了一个虚拟按钮

  div

  来替换真正的

  a

  元素，并将其放在前面，以便可以悬停（使用

  z-index

  ）。

.container {
  position: relative;
  /* This is the important one, the rest is styling */
  width: 200px;
  height: 200px;
  padding: 16px;
  border: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  z-index: 1;
  /* This is the important one, the rest is styling */
  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="#">Real link</a>
  <div class="button">Dummy link</div>
</div>

此方法满足上面列出的第一个和第二个所需行为，但不满足第三个。对虚拟按钮的点击不会传递到下面的

a

元素。

如果我在虚拟按钮上使用

pointer-events: none

将点击传递到

a

元素，则虚拟按钮上没有悬停动画，这违反了第一个要求。使用

:hover

或

:active

伪选择器应用相同的属性让我很接近，但是再次违反了第三个要求。

我尝试将

a

元素放在顶部（即从虚拟按钮中删除

z-index: 1 ;

）以满足第三个要求；然后，无需点击虚拟按钮即可到达链接。但是，虚拟按钮位于

a

元素下方，因此它不再接收悬停，这违反了第一个要求。

我尝试通过使用同级选择器在

a

元素悬停时打开虚拟按钮的悬停效果来解决此问题。然而，当光标位于容器中的任何位置时，虚拟按钮就会出现“悬停”，而不仅仅是当光标直接位于按钮上方时，这违反了第二个要求。

这把我难住了。我将不胜感激任何关于如何根据上述要求实现这种影响的建议（再次，寻找 HTML/CSS 解决方案ONLY）。

Answer 1

使容器成为一个链接，并将内部链接替换为

span

，因为它无论如何都是多余的。

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

.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 href="#" class="container">
  <span class="cover">Not a real link</span>
  <div class="button">Dummy link</div>
</a>