html - 试图使图像中的区域可点击

Question

我有一个联系页面设计，在一个框中有一个“主页”链接。

盒子被上面的波浪线稍微隐藏了起来:

我尝试了两种方法来使主页链接可点击:

1) 创建一个 href 作为 block 元素，并将其放置在 z-index 低于波浪线的位置。这会阻止链接被点击。

2) 将主页框保留为图像的一部分，并使用 CSS 在其顶部放置一个 href。这仅适用于某些浏览器宽度，即响应能力是一个问题。

a.home-link {
 display: block;
 position: absolute;
 width: 97px;
 height: 51px;
 left: 23vw;
 top: 10vw;
}

实现此目标的更可靠方法是什么？

Answer 1

您可能想使用 pointer-events: none; 进行检查

Working Example

.cover {
    position: absolute;
    top: 0;
    left:25px;
    opacity 0.9;
    pointer-events: none;/* <---relevant bit */
}