弹出/悬停方向或iFrame上方的菜单

Question

我试图正确地说出这一点但是一如既往：我是一个新手，所以原谅错误/混淆。

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

我想要的是弹出框或悬停在框上，说：返回博客或继续使用nameofsite.com。甚至iframe上面的链接现在还不够，但我不知道怎么做而不会搞乱嵌入式网站的外观。

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

像往常一样，我认为当一个简单的重定向已经足够时，我已经开发了一个非常复杂的问题！呃，好吧！谢谢你的时间。

Answer 1

可以为i-frame进行弹出，但它只能用于整个i-frame，而不能用于其中的元素。要制作弹出窗口，请在<div>：

中打包i-frame并弹出HTML

<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