html - 链接悬停时预览页面

Question

快速提问:

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

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

Answer 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/