包子的嘎吱村

鼠标悬停的时候显示图片

发布于 更新于
1,711

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

首先需要添加一些样式

<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>

 

0 / 600
欢迎参与讨论 登录/注册
529 条评论
热门最新
踏实保卫猎豹

还没看完,但是先评论点赞了哈哈哈

翅膀迅速

哈哈哈哈哈哈哈哈

完美扯睫毛膏

默默收藏了,悄咪咪评个论

靓丽打老鼠

有点东西哇

儒雅笑裙子

有点东西哇

儒雅笑裙子

还没看完,但是先评论点赞了哈哈哈

飞鸟要减肥

学到了,原来还可以这样啊

悦耳的皮皮虾

学到了,原来还可以这样啊

面包眯眯眼

哈哈哈哈哈哈哈哈

纯真踢红牛

哈哈哈哈哈哈哈哈

嗨,不要熬夜哦!
所有的成功,都源自一个勇敢的开始