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

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

[外链图片转存失败(img-daNNPv7C-1564158585452)(https://upload-images.jianshu.io/upload_images/11158618-58639473954fb6c4.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-lNM7M4pF-1564158585454)(https://upload-images.jianshu.io/upload_images/11158618-707fdfd0f62d42a4.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-xjzamV3n-1564158585456)(https://upload-images.jianshu.io/upload_images/11158618-e921a4674550e554.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-sGHOgSXF-1564158585457)(https://upload-images.jianshu.io/upload_images/11158618-757702797d346089.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-eqJHZakG-1564158585459)(https://upload-images.jianshu.io/upload_images/11158618-5068db40640ed41c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

子绝父相
[外链图片转存失败(img-2c8pApMU-1564158585460)(https://upload-images.jianshu.io/upload_images/11158618-b6868265888d7706.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

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

五种基本选择器

伪类选择器
[外链图片转存失败(img-6hySnGMC-1564158585464)(https://upload-images.jianshu.io/upload_images/11158618-e7e25f928e605763.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-2bS6dbl3-1564158585468)(https://upload-images.jianshu.io/upload_images/11158618-7c6e584844119333.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-Tf5S4bvx-1564158585469)(https://upload-images.jianshu.io/upload_images/11158618-a8219a9b7ce87f2c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

层级选择器

[外链图片转存失败(img-8PeVIiY0-1564158585470)(https://upload-images.jianshu.io/upload_images/11158618-3f0152ef4de8e6d5.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-1Q1WPl0M-1564158585471)(https://upload-images.jianshu.io/upload_images/11158618-2dace2aaecf9b856.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-Ypakg8nY-1564158585473)(https://upload-images.jianshu.io/upload_images/11158618-75d55b6659596e07.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-Hakrf0Mu-1564158585473)(https://upload-images.jianshu.io/upload_images/11158618-1dc4c0cecb598068.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-ZtPvZQQN-1564158585477)(https://upload-images.jianshu.io/upload_images/11158618-c475e6500c73c0ab.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-Js7SY0JP-1564158585478)(https://upload-images.jianshu.io/upload_images/11158618-832f631079e017a3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-lLQfWCSD-1564158585481)(https://upload-images.jianshu.io/upload_images/11158618-d63e00ce3a3dd56c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-7WxuvohE-1564158585483)(https://upload-images.jianshu.io/upload_images/11158618-fc244546ebbcaf7f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]