试图使图像区域可点击

Question

我的联系页面设计有一个＆＃39; Home＆＃39;链接在一个盒子里面。

盒子上面的波浪线稍微隐藏了一下：

我尝试了两种方法来使Home链接可点击：

1）创建一个href作为块元素，并使其z-index低于波浪线的z-index。这可以防止链接被点击。

2）将Home框保留为图像的一部分，并使用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 */
}

Answer 2

（示例1和2的混合）您可以创建一个具有更高z值的额外div并使其隐藏，而不是单击home而不是单击主页上方的区域

a.k.a。一种非恶意的形式：http://en.wikipedia.org/wiki/Clickjacking

Answer 3

点击页面 - 每个事件都会冒泡到文档级别。检查光标的坐标。查看坐标是否在“主页”选项卡的范围内。如果是，请执行Home选项卡上的任何操作。

Answer 4

您可以使用图像地图，因为它们可以生成图像CLICKABLE：

<img src="main.jpeg" width="1000" height="700" alt="image not displayed" usemap="#main">

<map name="main">
  <area shape="rect" coords="0,0,120,40" href="home.htm" alt="Sun">
  <area shape="rect" coords="0,130,40,250" href="about.htm" alt="Mercury">
</map>