鼠标移动到图片上放大效果

<!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; }

鼠标移动到图片上放大效果

相关推荐