Задержка появления iframe 'preview' popup

Я искал ответ, но я не могу найти легкое решение. В приведенном ниже примере я хочу отложить предварительный просмотр предварительного просмотра на определенное время, например. 2 секунды, ПОСЛЕ того, как я навешиваю ссылку.Задержка появления iframe 'preview' popup

.box{ 
 
    display: none; 
 
    width: 100%; 
 
} 
 

 
a:hover + .box, .box:hover{ 
 
    display: block; 
 
    position: relative; 
 
    z-index: 100; 
 
}

This live preview for <a id="someelem" href="http://en.wikipedia.org/">Wikipedia</a><div class="box"><iframe src="http://en.wikipedia.org/" width = "500px" height = "500px"></iframe></div> remains open on mouseover.

Редактировать/обновление 1:

Спасибо за ваши предложения. Ближе, но еще не совсем! Этот анимированный GIF объясняет, что я делаю; Я хотел бы, чтобы этот контент (например, заполнители изображений) оставался видимым, а при наведении мыши - появлением всплывающего окна, например. - 3 секунды.

Редактировать/обновление 2: Решение!

Мне это удалось. Вместо того, чтобы публиковать ответ на свой вопрос, я просто обновляю его здесь. HTML-код ниже работает так, как я предполагал, и содержит ссылку на рабочую демонстрацию на JSBin.com. [Iframe «DuckDuckGo» здесь не работает, но он работает на JSBin (http://jsbin.com/janaheheju/edit?html,css,output) и в моем домашнем браузере (локальная веб-страница).

Еще раз спасибо вам за ваше время и помощь: очень цените! :-)

<style type="text/css"> 
 
.thumbnail{ 
 
    position: relative; 
 
    z-index: 0 
 
} 
 

 
.thumbnail:hover{ 
 
    //background-color: transparent; 
 
    z-index: 50 
 
} 
 

 
/* CSS FOR ENLARGED IMAGE: */ 
 
.thumbnail span{ 
 
    position: absolute; 
 
    background-color: #eeeeee; 
 
    padding: 2px; 
 
    left: -1000px; 
 
    //border: 2px dashed gray; 
 
    //border: 2px dashed gray; 
 
    border: 1px solid blue; 
 
    visibility: hidden; 
 
    color: black; 
 
    text-decoration: none; 
 
    transition-delay: 0s 1s 
 
} 
 

 
/* CSS FOR ENLARGED IMAGE: */ 
 
    .thumbnail span img{ 
 
    border-width: 0; 
 
    padding: 2px 
 
} 
 

 
/* CSS FOR ENLARGED IMAGE ON HOVER: */ 
 
.thumbnail:hover span{ 
 
    visibility: visible; 
 
    top: 0px;  /* ENLARGED IMAGE: VERTICAL OFFSET [+ : above baseline | - : above baseline] */ 
 
    left: 0px;  /* ENLARGED IMAGE: HORIZONTAL OFFSET [+ : right | - : lest] */ 
 
    transition-delay: 1s; 
 
    background-color: #eeeeee; 
 
    opacity: 1 
 
}

<BODY BGCOLOR="#eeeeee"> 
 

 
<!-- CSS code, ideas from: http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P10/ --> 
 

 
<UL> 
 

 
<p> 
 
This code on <a href="http://jsbin.com/janaheheju/edit?html,css,output">JSBin.com</a> 
 

 
<br><hr size=2 color=green align=left><br> 
 

 
<p> 
 
<a class="thumbnail" href="https://upload.wikimedia.org/wikipedia/commons/0/00/Yellowstone-wolf-17120.jpg"><font color=green>A Wolf!</font><img src="https://upload.wikimedia.org/wikipedia/commons/2/26/Amarok_bw.png" width="50px"> 
 
<span><img src="https://upload.wikimedia.org/wikipedia/commons/0/00/Yellowstone-wolf-17120.jpg" width="400px"><br>What are <i><b>you</b></i> looking at? :-p</span></a> 
 

 
<p> 
 
Here is an iframe'd <a class="thumbnail" href="http://en.wikipedia.org/">Wikipedia<img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" width="50px"><span><iframe src="http://en.wikipedia.org/" width="800px" height="500px"></iframe><br><b><font color=magenta>... more caption text here [optional] ...</font></b></span></a> front page, that serves as a navigable preview pane for web pages, images, text files, images, videos, other content)! ;-) 
 

 
<br><br><hr size=2 color=green align=left> 
 

 
<p> 
 
Some headlines, via&nbsp; <a class="thumbnail" href="https://duckduckgo.com/?q=news&ia=web"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/DuckDuckGo_logo_and_wordmark_%282014-present%29.svg/312px-DuckDuckGo_logo_and_wordmark_%282014-present%29.svg.png" width="75px"><span><iframe src="https://duckduckgo.com/?q=news&ia=web" width = "1000px" height = "600px"></iframe></span></a> 
 

 
<p> 
 
Nonsense, pure nonsense: 
 

 
    <ul> 
 
     <font size=2>"<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</i>"</font> 
 
    </ul> 
 

 
<p><hr size=2 color=green align=left><p> 
 

 
<br><br><br><br> 
 
</UL> 
 
</BODY>

источник

2016-10-11 Victoria Stuart

Dalay 3 сек .. Если курсор под фрейма, то IFrame открытым. Что не совсем там? Что ваш браузер и ОС? –

Привет, Александр: см. Мои комментарии, под ваш ответ. Я использую Firefox 49.0.1 в системе Arch Linux x86_64. –

Im make редактирование/обновление моего ответа. Вкусите его и это: http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css/33866294#33866294 –

После "а" и ".box" внутренний JavaScript:

someelem.onmouseover=function(){setTimeout(function(){document.querySelector('.box').style='display:block;position:relative;z-index:100'},811)}, 
 
document.querySelector('.box').onmouseout=function(){this.style=''}

.box{display:none}iframe{width:500px;height:500px}

This live preview for <a href="http://en.wikipedia.org/" id="someelem">Wikipedia</a><div class="box"><iframe src="http://en.wikipedia.org/"></iframe></div> remains open on mouseover.

источник

2016-10-11 18:01:14

Вы не можете перейти display собственность, но вы можете использовать visibility или opacity. Проверьте этот jsfiddle, который я сделал, чтобы продемонстрировать. https://jsfiddle.net/kthd9k28/

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

источник

2016-10-11 18:01:20 Varin

Код, комментарии здесь: http://jsbin.com/ragegalavi/edit?html,css,output Резюме: работает, но теперь необходимо скопировать все URL (теги) с тегами div; эквивалентное скрытому контенту. Хорошая попытка, хотя - оценили! Как вы можете видеть, проблема не «тривиальна». –

iframe{ 
 
position:absolute; 
 
left:0; 
 
width:100%; 
 
height:0; 
 
border:0 
 
} 
 

 
a:hover iframe{ 
 
height:500px; 
 
transition:.2s 2s 
 
}

This live preview for <a id="someelem" href="http://en.wikipedia.org/">Wikipedia 
 
<iframe src="http://en.wikipedia.org/"></iframe></a> remains open on mouseover.

источник

2016-10-11 20:40:40

Еще один хороший ответ (близко, но не совсем); код/комментарии здесь: http://jsbin.com/didedexoya/edit?css,output Краткое описание: предварительный просмотр W, H, жестко закодированный в определении CSS. –

Вкус еще один мой ответ: http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css/33866294#33866294 –

Задержка появления iframe 'preview' popup

ответ

Смежные вопросы