Web前端鼠标悬停实现显示与隐藏效果

达达前端

发布于 2019-07-28 06:50:51

4K00

代码可运行

运行总次数：0

代码可运行

css定义，偏移量，相对定位，绝对定位显示与隐藏二维码相对于微信图标定位鼠标悬停微信图标上显示鼠标离开微信图标时隐藏什么是定位，就是定义网页标签在运行时显示的位置 css提供Position属性用于指定元素在网页中定位的方式 background-position: 设置背景图片的显示位置

image.png

image.png

image.png

image.png

image.png

子绝父相

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .box1{
            width:500px;
            height:500px;
            background:green;
        }
        .box2{
            width:200px;
            height:100px;
            background:red;
            /*此处填写代码*/
            position: absolute;
            left: 150px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>