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

2019-07-27 本文已影响14人魔王哪吒

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

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>

五种基本选择器

伪类选择器