javascript - 延迟显示 iframe 'preview' 弹出窗口-6ren

javascript - 延迟显示 iframe 'preview' 弹出窗口

转载作者：太空宇宙更新时间：2023-11-04 02:09:46

25

4

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

.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 上的工作演示的链接。 [“DuckDuckGo”iframe 在这里不起作用，但它在 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>

最佳答案

您不能转换 display 属性，但可以使用 visibility 或 opacity。检查我制作的这个 jsfiddle 来演示。 https://jsfiddle.net/kthd9k28/

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

关于javascript - 延迟显示 iframe 'preview' 弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39983571/

25

4

0

文章推荐： python - Unetstack - Python API - 组合 Tx/Rx

文章推荐： java - Socket.io 无需加入即可收听房间

文章推荐： node.js - 如何使用brew安装node 5.4.1

javascript (函数(窗口){})(窗口)
https://github.com/mattdiamond/Recorderjs/blob/master/recorder.js中的代码我不明白 JavaScript 语法，比如 (functio
ios - 在 iOS 8 中查找 TopMost 窗口/FrontMost 窗口
在 iOS 7 及更早版本中，如果我们想在应用程序中找到 topMostWindow，我们通常使用以下代码行 [[[UIApplication sharedApplication] windows]
JavaScript 窗口
我已经尝试解决这个问题很长一段时间了:我无法访问窗口的 url，因为它位于另一个域上..有一些解决方案吗？ function login() { var cb = window.ope
c# - 将ffmpeg流传递给c#窗口
是否可以将 FFMPEG 视频流传递到 C# 窗口？现在它在新窗口中作为新进程打开，我只是想将它传递给我自己的 SessionWindow。此时我像这样执行ffplay: public void E
R:窗口()函数
我有一个名为 x 的矩阵看起来像这样: pTime Close 1 1275087600 1.2268 2 1275264000 1.2264 3 1275264300 1.2
emacs - Emacs如何自动跳转到新创建的缓冲区/窗口
在编译时，发生搜索，grep搜索等，Emacs会在单独的窗口中创建一个新的缓冲区来显示结果，有没有自动跳转到那个窗口的方法？这很有用，因为我可以使用 n 和 p 而不是 M-g n 和 M-g p 移
从批处理文件启动时的 PowerShell 窗口
我有一个启动 PowerShell 脚本的批处理文件。批处理文件: START Powershell -executionpolicy RemoteSigned -noexit -file "MyS
cocoa - NSWindowController 窗口？
我有一个基于菜单栏的应用程序，单击图标时会显示一个窗口。在 Mac OS X Lion 上一切正常，但由于某种原因，在 Snow Leopard 和早期版本的 Mac OS X 上会出现错误。任何时候
带有集成标题栏和工具栏的 macOS 窗口？
在 macOS 中，如何在 Xcode 和/或 Interface Builder 中创建带有“集成标题栏和工具栏”的窗口？这是“宽标题栏”类型的窗口，已添加到 OS X 10.10 Yosemit
javascript - 为什么 this == 窗口？
在浏览器 (Chrome) 中 JavaScript: var DataModler = { Data: { Something: 'value' }, Process: functi
javascript - 关闭另一个选项卡/窗口
我有 3 个 html 页面。第 1 页链接到第 2 页，第 2 页链接到第 3 页(为了简单起见)。我希望页面 2 中的链接打开页面 3 并关闭页面 1(选项卡 1)。据我了解，您无法使用 Ja
javascript - 如何使用下拉菜单打开新框架/窗口
当点击“创建节点”按钮时，如何打开一个新的框架或窗口？我希望新框架包含一个文本字段和下拉菜单，以便用户可以选择一个选项。 Create node Search node
托管用户控件的 WPF 窗口
我有一个用户控件，用于编辑应用程序中的某些对象。我最近遇到一个实例，我想弹出一个新的对话框(窗口)来托管此用户控件。如何实例化新窗口并将需要设置的任何属性从窗口传递到用户控件？感谢您的宝贵时间。
kotlin - 具有自定义计数标准的RxJava缓冲区/窗口
我有一个Observable，它发出许多对象，我想使用window或buffer操作对这些对象进行分组。但是，我不想指定count参数来确定窗口中应包含多少个对象，而是希望能够使用自定义条件。例如，
JavaFX 防止在单击按钮时打开新阶段(窗口)
我有以下代码，它打开一个新的 JavaFX 阶段(我们称之为窗口)。 openAlertBox.setOnAction(e -> { AlertBox alert = AlertBox
ios - 如何检查当前的iOS设备是否支持多个场景/窗口？
我要添加一个“在新窗口中打开”上下文菜单项，该菜单项将以新的UIScene打开我的应用程序文档之一。当然，我只想在实际上支持多个场景的设备上显示该菜单项。目前，我只是在检查设备是否是使用旧设备的iP
macos - 我可以使用哪些命令行工具来获取每个平台上当前事件的应用程序/窗口？
我正在尝试创建一个 AIR 应用程序来记录应用程序的使用情况，使用 AIR 从系统获取信息的唯一简单方法是使用命令行工具和抓取标准输出 . 我知道像这样的工具顶部和 ps 对于 OS X，但它们
python - 如何打印一个turtle()窗口？
所以我有这个简单的 turtle 螺旋制作器，我想知道是否有一种方法可以打印出由该程序创建的我的设计副本。代码: import turtle x= float(input("Angle: ")) y
c# - 将快速文本输入发送到另一个进程(窗口)
我正在编写一个 C# WPF 程序，它将文本消息发送到另一个程序的窗口。我有一个宏程序作为我的键盘驱动程序 (Logitech g15) 的一部分，它已经这样做了，尽管它不会将击键直接发送到进程，而是
C 窗口 sendto()
我尝试使用以下代码通过 UDP 发送，但得到了奇怪的结果。 if((sendto(newSocket, sendBuf, totalLength, 0, (SOCKADDR *)&sendAd

首页

博学

6Ren·AI

商城

javascript - 延迟显示 iframe 'preview' 弹出窗口