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

最新推荐文章于 2023-03-13 14:26:40 发布

weixin_34266504

最新推荐文章于 2023-03-13 14:26:40 发布

阅读量117

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/longsanshi/p/9261881.html

本文介绍了一种使用HTML和CSS实现的图片悬停放大显示效果，并提供了代码示例。通过对原始代码进行调整以解决冲突问题，实现了在网页表格中展示二维码图片及其放大预览功能。

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