使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可見，但能夠點擊通過

回答

相關問題