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

Question

我正在全帧谷歌文档 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 有 mouseover 和 mouseout 事件，它们调用 javascript 来改变覆盖的不透明度。

您可以尝试将 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>

Answer 2

也许使用 z-index 是一种更好的方法，因为当您在 :hover 上执行 display:none; 时，您并没有悬停任何元素，因此会发生令人讨厌的效果。

#header:hover {
    opacity: 0;
    z-index: -1;
}

Answer 3

iframe 有一个加载事件，一旦加载就会触发。
只需创建您的叠加层，并在 iframe 的 onload 事件触发后将其移除。

HTML：

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

CSS：

#background-site {
    position: relative;
}

#background-site.showOverlay:before {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: red;
    z-index: 2;
}

JS：

document.getElementById("backgrnd").addEventListener("load", function() {
    document.getElementById("background-site").classList.remove('showOverlay')
});

在当前代码中，您也可以使用 parentElement 来实现相同的结果，因为事件在 iframe 上触发：

document.getElementById("backgrnd").addEventListener("load", function(e) {
    e.target.parentElement.classList.remove('showOverlay')
});

Answer 4

您好，我有一个可行的解决方案（见下文）。

不幸的是，它需要（原版）JavaScript；我希望你不要介意。我尝试了几种 CSS 解决方案，例如动画，但都无济于事。

无论如何，诀窍是分别在 iframe 和叠加层上使用单独的 mouse in 和 mouse out 事件侦听器。

document.getElementById("overlay").addEventListener("mouseover", overlayDisappear);
document.getElementById("theiframe").addEventListener("mouseout", overlayAppear);

function replaceAll(str, toFind, toReplace){
  return str.replace(new RegExp(toFind.toString(),"g"), toReplace.toString());
}

function overlayAppear(){
  //console.log("Appear", document.getElementById("overlay").className);
  document.getElementById("overlay").className = replaceAll( document.getElementById("overlay").className, "_disappear","_appear");  
}

function overlayDisappear(){
  //console.log("Disappear", document.getElementById("overlay").className);
  document.getElementById("overlay").className = replaceAll( document.getElementById("overlay").className, "_appear","_disappear");  
}

#theiframe, #overlay{
  width:200px;
  height:200px;
  
  position:fixed;
  top:0;
  left:0;
}

#theiframe{
  border: 2px solid black;
}

#overlay{
  background:red;
  transition:all 0.3s ease;
}

#overlay._appear{
  opacity:1;
  z-index:1;
}

#overlay._disappear{
  opacity:0;
  z-index:-1;
}

/*
#overlay:hover{
  animation-name: disappear;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

@keyframes disappear{
  0%   { opacity:1; }
  50%  { opacity:0.5; }
  99%  { opacity:0; z-index:1; }
  100% { opacity:0; z-index:-1; }
}*/

<iframe id="theiframe" src="https://samleo8.github.io/web"></iframe>
<div id="overlay" class="_appear"></div>