Question

我有两个全屏div。

CSS

#border-overlay {
    position:absolute;
    z-index: 100;
    top:0; left:0;
    width: 100vw;          
    height: 100vh;
    box-sizing: border-box; 
    border: solid 8px white;
}

#button
    position: absolute;
    display: block;
    top: 0; left: 0;
    height: 100%; width: 100%;
    background-color: rgba(0,0,0,0);
    z-index: 15;
}

HTML

<div id="border-overlay"></div>
<a id="button" href=""> ... </a>

我需要在按钮div顶部的边框div，但这会删除我想要保留的按钮的链接功能。本质上，按钮占据整个屏幕，因此您可以点击任何地方。

Answer 1

不是100％确定您要实现的目标，但您可以执行以下操作：

将onclick事件插入到您的包装器div中，该div将调用您的锚标签的点击。还要向css添加指针光标，它看起来就像你按下锚点一样。

function clickMe() {
  document.getElementById("button").click();
}

#border-overlay {
    position:absolute;
    z-index: 100;
    top:0; left:0;
    width: 100vw;          
    height: 100vh;
    box-sizing: border-box; 
    border: solid 8px white;
    background-color: yellow;
    cursor: pointer;
}

#button{
    position: absolute;
    display: block;
    top: 0; left: 0;
    height: 100%; width: 100%;
    background-color: rgba(0,0,0,0);
    z-index: 15;
}

<div id="border-overlay" onclick="clickMe()"></div>
<a id="button" href="/asdad"> Link me up Scottie</a>

Answer 2

不需要JavaScript。在div上使用CSS pointer-events: none：

#border-overlay {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  border: solid 8px white;
  pointer-events: none;
}

<强> jsFiddle example

使div可见但能够点击

2 个答案: