带有自定义预览

Question

我想创建一个iframe，允许您查看自定义预览。所以目前我把它作为我的iframe代码

<a class="hover">Example
 <iframe class="preview" src="http://www.example.com"></iframe>
</a>

和此脚本启用悬停预览

$(".hover").mouseover(function() {
    $(this).children(".preview").show();
}).mouseout(function() {
    $(this).children(".preview").hide();
});

但是，我希望能够在iframe中显示我自己的自定义HTML，而不是网站的预览。例如，如果我将鼠标悬停在公司名称上，我希望能够显示诸如创建时间，员工人数等信息。我该怎么做？

Answer 1

不需要js

你可以通过css

完成

.preview{
  display:none;
}

.hover:hover .preview{
  display:block;
}