CSS中带有悬停效果的点击跳转

Question

我想制作一个没有链接的按钮，因为背景已经有了链接。因此你应该能够通过它点击。我知道 pointer-events:none，但是使用这个属性之后，div 的 :hover 就不再起作用了。

有什么方法可以实现这个效果吗？

我的 HTML 代码如下：

<div class="button">
<span>Click here</span>
</div>

CSS：

.button { pointer-events: none; }
.button:hover { ... }

"button"类应该有:hover效果和点击穿透。但是这种设置不会显示:hover效果。

- Jo Hannes

---

链接的背景只在按钮后面，还是覆盖整个页面的100%宽度？ - Fahad Hasan

不是整个页面，但比按钮大 - Jo Hannes

你可以同时包含添加背景的 HTML 和 CSS 吗？ - Fahad Hasan

抱歉，我无法做到这一点。我正在使用Magento，但不确定它从哪里提取。 - Jo Hannes

对我来说也是同样的困扰！需要使用pointer-events:none来检测下方的输入元素，但是层的悬停效果会消失。一个opacity:0的层右端有一个可见的移除按钮，应该在悬停时显示出来。 - Dan Froberg

Answer 1

将 .button:hover { ... } 替换为：

.background:hover .button { ... }

在链接的背景上设置类：

<a class="background" href="...">
    <button class="button">...</button>
</a>

悬停区域的大小与按钮点击区域相同。 使用.background{display:block}，您可以创建一个带有更大悬停区域（也是点击区域）的虚拟按钮。这对于老年人在小型移动显示屏上尝试点击小按钮非常有用。更大的悬停区域对于桌面预加载、优化延迟、分析热图、突出隐藏按钮和其他技巧也很有用。 替代方案

.background:hover {
    /* hovering effects */
}

.background:hover ~ button {
    position:absolute;
    top: 0;
    pointer-events:none; /* click through */
}

使用 相邻兄弟选择器 '+' 或 一般兄弟选择器 '~'。你可以使用 onclick 代替 href。

<div class="background" onclick="..."></div>
<button>...</button>

- Dan Froberg

---

唯一的缺点是当你鼠标悬停在背景上时，:hover效果会触发，正如OP所述，背景比按钮略大。如果你关心这些东西，也会增加特异性。 - Myykro

添加 <a class="background" href="..."><div class="button">...</div></a>，链接与下方相同，但浮动区域大小设置为与按钮相同。 - Dan Froberg

好的。为了完整起见，您可能希望将其编辑到您的答案中。 - Myykro

Answer 2

没有看到您的代码，我会建议两种方法：

1）只需将两者链接起来即可，没有任何问题。

2）通过JavaScript链接您的背景。如果按钮是子元素，则单击事件会冒泡到您链接的背景。

- Shawn Erquhart

---

1. 在这种情况下，这是一个问题，因为它应该对每个人都容易编辑。
2. 谢谢，我会尝试一下，但更希望有一个仅使用CSS的解决方案。

- Jo Hannes

澄清一下 - 没有符合您标准的仅使用CSS的解决方案。这些是选项 :) - Shawn Erquhart