链接悬停时的预览页面

【问题标题】：Preview page on link hover链接悬停时的预览页面
【发布时间】：2014-06-08 17:10:10
【问题描述】：

快速提问：

我可以在我的网页中的所有链接上启用网站预览吗？
即当用户将鼠标移到页面中的任何链接上时，我想显示一个简单的弹出窗口，该窗口在链接中加载页面。

如果它很重要，我正在使用 Asp.net

【问题讨论】：

是的，当然可以。我认为您需要问的问题是“如何”。
是的，感谢您的澄清 :)
从 chrome 用户的角度来看，我可以为我去的页面上的链接实现这个吗？我见过一些像这样的 chrome 插件，但我想知道安全性。

标签： html asp.net hyperlink popup hover

【解决方案1】：

您可以使用iframe 标记来显示另一个页面。

    <iframe src="http://www.example.com"></iframe>

你的 HTML

 <a class="tiptext">A link
 <iframe class="description" src="http://www.example.com"></iframe>
 </a>

你的 CSS

.tiptext {
    color:#069; 
    cursor:pointer;
}
.description {
    display:none;
    position:absolute;
    border:1px solid #000;
    width:400px;
    height:400px;
}

你的 JS

$(".tiptext").mouseover(function() {
    $(this).children(".description").show();
}).mouseout(function() {
    $(this).children(".description").hide();
});

JSFiddle：http://jsfiddle.net/yboss/q29tP/

【讨论】：