鼠标悬停的时候显示图片

主要是为了实现鼠标移动到一行字的时候可以显示一张图片。

首先需要添加一些样式

<style type="text/css">
        div {   先定义一个盒子
            width: 100px;
            height: 100px;
            background-color: pink;   背景颜色
            text-align: center;      文字水平居中
            line-height: 100px;   文字垂直居中
            margin: 100px auto;      图片上下就、100像素 左右居中对齐
            position: relative;   相对定位 不占位置是标准流
        }
        div img {
            position: absolute;   要插入的图片绝对定位 不是标准流
            left: 110px;   以大盒子为准对齐
            top: 0;
            display: none;  
        }
        div:hover img {     鼠标经过 显示的内容
            display: block;   转换成块级元素
        }
</style>

然后就可以在需要悬停显示的地方添加相应代码即可

<div class="ewmdiv" style="padding-bottom: 5px;;">
 <a href="#" class="hdlist"><i class="fa fa-qrcode"></i> 查看二维码</a>
 <img src="{php echo tomedia($row['ewmimg']) }" />
</div>