css鼠标经过显示图片

小薯片子

已于 2022-02-09 15:18:50 修改

阅读量1.9w

点赞数 9

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css css3 html

于 2018-02-18 23:29:17 首次发布

本文链接：https://blog.youkuaiyun.com/luobo2345/article/details/78598286

css 专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <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>
    </head>
    <body>
    <div>
        可以是二维码
        <img src="taobao.jpg" />
    </div>
    </body>
</html>