<!DOCTYPE html>
<html>
<head>
</head>
<body id="player">
<a class="thumbnail" href="#">
<img src="http://att.itzmx.com/data/attachment/forum/201605/20/002212u9jjo9tvuoe89pt9.png" width="50" height="50"><br>
<span><img src="http://att.itzmx.com/data/attachment/forum/201605/20/002212u9jjo9tvuoe89pt9.png" width="250" height="250"></span></a>
</body>
<style type="text/css">
.thumbnail{ position:relative; z-index:0; }
.thumbnail:hover{ background-color:transparent; z-index:999999; }
.thumbnail span{ position:absolute; background-color:#FFFFE0; left:-1000px;border:1px dashed gray; visibility:hidden; color:#000; text-decoration:none; padding:5px; }
.thumbnail span img{ border-0; padding:2px; }
.thumbnail:hover span{ visibility:visible; top:10px; left:50px; }
p{ margin-top:200px; }
</style>
这个是别人写的，发现放到自己代码中用不了，应该是冲突了，以下是改过的
<el-table-column label="二维码" prop="qrCodePic" min-width='80'> <template slot-scope="scope"> <a class="thumbnail" v-show="true"> <img :src="$src+'files'+scope.row.codePath" alt="" style="78px;height:78px;margin:0 auto;"> <span> <img :src="$src+'files'+scope.row.qrCodePic" alt="" style="150px;height:150px;"></span></a> </template> </el-table-column> .thumbnail{ z-index:99999; } .thumbnail:hover{ background-color:transparent; z-index:50000; } .thumbnail span{ position:absolute; background-color:#FFFFE0; z-index:50000;left:-1000px;border:1px dashed gray; visibility:hidden; color:#000; text-decoration:none; padding:5px; } .thumbnail span img{ border-0; padding:2px; } .thumbnail:hover span{ visibility:visible; top:78px; left:82px; } p{ margin-top:200px; }