css鼠标经过显示图片

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

猜你喜欢

转载自blog.csdn.net/luobo2345/article/details/78598286
今日推荐