Блог

Я работаю над наложением поверх полнокадрового iframe Google docs. Я хочу, чтобы верхняя часть документов была покрыта div шириной 100%, который исчезает при наведении курсора мыши, открывая параметры документов, которые становятся интерактивными.

У меня работает переход fade, но невидимый 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>

  

Попробуйте это, должно сработать — я воспроизвел вашу проблему, используя некоторые divs, но это проясняет суть.

Сначала используйте стиль «pointer-event: none;», чтобы сделать div верхнего уровня доступным для выбора. Нижний div имеет события наведения курсора мыши и наведения курсора мыши, которые вызывают javascript для изменения непрозрачности наложения.

Вы можете попробовать применить функции наведения курсора мыши и вывода курсора мыши к div, содержащему iframe

 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>  

Возможно, использование z-index — лучший подход, потому что, когда вы выполняете display:none; on:hover, вы не зависаете ни на одном элементе, поэтому возникает неприятный эффект.

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

Iframes имеют событие загрузки, которое срабатывает после их загрузки.
Просто создайте свой оверлей и удалите его, как только сработает событие onload iframe.

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')
});
  

Привет, у меня есть рабочее решение (см. Ниже).

К сожалению, для этого требуется (ванильный) JavaScript; Надеюсь, вы не возражаете. Я попробовал несколько CSS-решений, таких как анимация, и все, но безрезультатно.

В любом случае, хитрость заключается в использовании отдельных прослушивателей событий ввода и вывода мыши в iframe и оверлеях соответственно.

 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>