鼠标移动到图片上放大效果
<!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-width: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="width:78px;height:78px;margin:0 auto;"> <span> <img :src="$src+'files'+scope.row.qrCodePic" alt="" style="width: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-width:0; padding:2px; } .thumbnail:hover span{ visibility:visible; top:78px; left:82px; } p{ margin-top:200px; }