Javascript -查看HTML中的adobe文件(鼠标通过)

Question

我在html中有一个包含.psd、.ai、.eps、.pdf的文件列表。当鼠标移到文件名上时，我想要查看文件。这有可能吗？

下面的片段就是一个例子。

​

.box{
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}

This live preview for <a href="http://en.wikipedia.org/">Wikipedia</a><div class="box"><iframe src="http://en.wikipedia.org/" width = "500px" height = "500px"></iframe></div> remains open on mouseover.

​

Answer 1

试一试

<a href="path to your file" class="preview">Link</a><div class="box"><iframe src="" width = "500px" height = "500px" style="display:none;"></iframe></div>

Jquery：

   $(document).ready(function(){
     $(document).on('mouseover','.preview',function(){
var path_source=$(this).attr('href');
$("iframe").attr("src",path_source);
$("iframe").show();

});
 $(document).on('mouseout','.preview',function(){

$("iframe").hide();

});

});