定義可點擊區域，同時禁用鏈接？

Question

我有一個網站，人們可以嵌入instagram視頻。我將這些顯示爲縮略圖，並且我希望在點擊縮略圖時有一個覆蓋彈出框（包含全尺寸視頻）。不幸的是，Instagram的嵌入代碼帶有內置鏈接，點擊時視頻只能以小尺寸播放。

所以我的問題是：我如何創建一個無形的覆蓋區域+鏈接，將忽略底層內容的鏈接？ （我有彈出窗口編碼和工作正常，只需要弄清楚如何禁用鏈接）

謝謝！

Answer 1

你可以在你想禁用的鏈接上放一個透明的div，並給它更高的z-index。

#links { 
 
    position: absolute; 
 
    z-index: 999; /* simulating that the target has a manually given z-index*/ 
 
} 
 
#maskDiv{ 
 
    background: rgba(255,255,255,0.6); /* keeping it partially visible to demontrate it's there*/ 
 
    width: 200px; 
 
    height: 42px; 
 
    position: absolute; 
 
    top: 40px; 
 
    z-index:1000; /* needs to be higher than the target div */ 
 
}

<div id="links"> 
 
<a href="#">A functional link</a><br /> 
 
<a href="#">Another functional link</a><br /> 
 
<a href="#">A link masked by a div</a><br /> 
 
<a href="#">Another</a><br /> 
 
<a href="#">Last one is functional</a><br /> 
 
</div> 
 
<div id="maskDiv"></div>