Web前端鼠標懸停實現顯示與隱藏效果

本文轉載自查看原文 2019-07-27 00:30 539

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)]