Question

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

以下代码段是示例。

＆＃13;

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

＆＃13;

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.

＆＃13;

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();

});

});

Javascript - 以HTML格式查看adobe文件（鼠标悬停）

1 个答案: