Question

我已经找到了答案，但我找不到一个简单的解决方案。在下面的示例中，我希望将预览的外观延迟定义的时间，例如2秒后，我将鼠标悬停在链接上。

＆＃13;

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

＆＃13;

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.

＆＃13;

编辑/更新1：

感谢您的建议。更近，但还不完全！这个动画GIF解释了我在做什么;我希望这些内容（例如图像占位符）保持可见，并且在鼠标悬停时延迟弹出窗口的外观 - 例如 - 3秒。

编辑/更新2：解决方案！

我设法解决了这个问题。我不是在回答我自己的问题，而是在这里更新。下面的HTML代码按照我的意图工作，并包含指向JSBin.com上的工作演示的链接。 [＆＃34; DuckDuckGo＆＃34; iframe在这里不起作用，但它确实适用于JSBin（http://jsbin.com/janaheheju/edit?html,css,output）和我的家庭浏览器（本地网页）。

再次感谢大家的时间和帮助：非常感谢！： - ）

＆＃13;

<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
}

＆＃13;

<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>

＆＃13;

Answer 1

您无法转换display属性，但可以使用visibility或opacity。检查我为证明这个jsfiddle。 https://jsfiddle.net/kthd9k28/

如果您不希望它在设计出现或消失时破坏您的设计，您可以绝对定位该元素。

Answer 2

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.

Answer 3

＆＃34; a＆＃34;和＆＃34; .box＆＃34;内部JavaScript：

＆＃13;

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

＆＃13;

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

＆＃13;

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.

＆＃13;

延迟出现iframe＆＃39;预览＆＃39;弹出

3 个答案: