如何在鼠标悬停在链接上时在链接页面的小弹出窗口中显示实时预览?
像这样
http://cssglobe.com/lab/tooltip/03/
但实时预览
您可以使用 iframe 在鼠标悬停时显示页面预览:
.box{
display: none;
width: 100%;
}
a:hover + .box,.box:hover{
display: block;
position: relative;
z-index: 100;
}
This live preview for <a href="https://en.wikipedia.org/">Wikipedia</a>
<div class="box">
<iframe src="https://en.wikipedia.org/" width = "500px" height = "500px">
</iframe>
</div>
remains open on mouseover.
这是一个具有多个实时预览的示例:
.box{
display: none;
width: 100%;
}
a:hover + .box,.box:hover{
display: block;
position: relative;
z-index: 100;
}
Live previews for <a href="https://en.wikipedia.org/">Wikipedia</a>
<div class="box">
<iframe src="https://en.wikipedia.org/" width = "500px" height = "500px">
</iframe>
</div>
and <a href="https://www.jquery.com/">JQuery</a>
<div class="box">
<iframe src="https://www.jquery.com/" width = "500px" height = "500px">
</iframe>
</div>
will appear when these links are moused over.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)