html - 如何使覆盖 iframe 的 div 在悬停时淡入淡出，使 iframe 可点击？

Question

我正在全帧 google docs iframe 上制作叠加层。我希望文档的顶部被一个 100% 宽度的 div 覆盖，该 div 在悬停时消失，显示可点击的文档选项。

我的淡入淡出过渡有效，但不可见的 div 阻止了 iframe 被点击。如果我使用 pointer-events:none，更改 z-index 或 display:none，当光标移动时我会得到令人讨厌的闪烁效果。

有变通办法吗？

https://github.com/plasticplant/miscresearch/tree/master/miscresearch

#background-site {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#background-site iframe {
  width: 100%;
  height: 100%;
  border: none;
  overflow: scroll;
}

#header {
  position: absolute;
  width: 100%;
  z-index: 30;
  font-size: 55px;
  font-family: 'Sporting_Grotesque-Bold';
  padding: 5px;
  text-align: center;
  transition: 0.3s;
  background: white;
 }

  #header:hover {
  opacity: 0;
}

<div id="header">
miscresearch
</div>

<div id="background-site"><iframe name="backgrnd" id="backgrnd" scrolling="yes" src="https://docs.google.com/document/d/16_jikyP9LfNibSOvM4XPeuB2jhf8YEYES1p8xhTBBDM/edit?usp=sharing"></iframe></div>

Answer 1

试试这个，应该有用——我使用一些 div 复制了你的问题，但它明白了要点。

首先，使用样式“pointer-event:none;”使上层div能够被选中。下面的 div 有调用 javascript 的 mouseover 和 mouseout 事件来改变叠加层的不透明度。

您可以尝试将 mouseover 和 mouseout 函数应用于包含 iframe 的 div

function hidefunc(){
  document.getElementById("test").style.opacity = '0';
}
function showfunc(){
  document.getElementById("test").style.opacity ="1"
}

#test{
  position:absolute;
  top:0px;
  width:300px;
  height:300px;
  background-color:#000000;
  transition: opacity .5s;
  pointer-events:none;
  z-index:2;
}
#base{
  position:absolute;
  top:0;
  z-index:0;
  height:50px;
  width:600px;
  background-color:red;
}

<div id="test">
</div>
<div onmouseover="hidefunc()" onmouseout="showfunc()" id="base">
  <a href="">Link</a>
</div>