使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，然而由此，能够消除我想保持按钮的链接功能。本质上，按钮占据全屏幕，因此您可以在任何地方点击。

来源

2016-07-23 user3550879

任何具体原因你想在上边框的div？ – Kan412

也许这有助于：http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements – daymosik

你的代码不清楚你需要什么，你能描述更多吗？ – M98

没有所需的JavaScript。使用CSS pointer-events: none的DIV：

#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

来源

2016-07-23 23:34:38 j08691

指针事件是否具有良好的跨浏览器兼容性以及屏幕大小响应？ – user3550879

不是100％肯定你想什么来实现，但你可以做到以下几点：

插入onclick事件到您的包装的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>

来源

2016-07-23 13:35:38

边框div不是按钮，按钮是在下面并更改 – user3550879

使div可见，但能够点击通过

回答

相关问题