html - 在 iFrame 上方弹出/悬停方向或菜单

Question

我正在尝试正确地表达这一点，但一如既往:我是新手，所以请原谅错误/混淆。

我创建了一个 iframe，将客户的主站点嵌入到他们的 tumblr 中，这意味着您不必离开 tumblr 即可访问该站点。我这样做是因为老设计师安装了一个“商店中的最新商品”小部件，该小部件不再有效，我想要类似的东西，但所需的信息不再存在。

我想要的是弹出框或悬停框，上面写着:返回博客或继续访问 nameofsite.com。即使是 iframe 上方的链接现在也足够了，但我想不出如何在不弄乱嵌入式网站外观的情况下做到这一点。

http://2000adonline.tumblr.com/website

像往常一样，我想我遇到了一个非常复杂的问题，而一个简单的重定向就足够了!呃，好吧!感谢您的宝贵时间。

Answer 1

可以为 i-frame 制作弹出窗口，但它只能针对整个 i-frame，而不是其中的元素。要制作弹出窗口，请将 i 框架和弹出 HTML 包装在 <div> 中。 :

<div id="iframe">
<iframe src="http://www.w3.org"></iframe>
<div class="over">Return to blog or carry on to nameofsite.com</div>
</div>

然后您需要设置 iframe 和弹出窗口的样式:

iframe{
    width:500px;
    height:500px;
}
#iframe:hover  .over{
    opacity:1;
}
.over{
    opacity:0;
    position:absolute;
    top:0px;
    left:0px;
    background:red;
    width:100%;
    height:40px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s ;
    -webkit-transition:.3s;
    transition:.3s  ;
}
#iframe{
    position:relative;
    width:500px;
 }

当 div #iframe 悬停时，弹出窗口在顶部淡入。
See this working JSFiddle Example