【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )

韩曙亮

发布于 2023-04-16 14:31:04

3K00

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

一、鼠标移动到元素上方显示 / 移出盒子范围隐藏案例要点分析

1、子绝父相

这里要在一个 div 盒子上方套一层遮罩 , 遮罩就需要使用绝对定位将其覆盖到其它元素中 ;

子元素使用了绝对定位 , 父元素必须使用相对定位 ;

2、显示隐藏元素对象

使用

display: none;

样式隐藏元素 ,

使用

display: block;

样式显示元素 ;

3、鼠标经过样式设置

鼠标经过链接时 , 显示链接中的 one 元素 , 需要使用如下选择器进行设置 ;

		/* 鼠标经过时 one 作为遮罩 显示出来 */
		.box a:hover .one {
			/* 设置显示元素 none 为隐藏 block 为显示 */
			display: block;
		}

4、半透明遮罩设置

使用 background 复合写法 , 设置半透明背景 , 背景图片 , 背景图片位置 ;

			/* 设置背景 背景颜色 + 背景图片
			   背景颜色为黑色半透明
			   背景图片 不平铺 只显示 1 个 显示在正中心 */
			background: rgba(0, 0, 0, .3) url(bg.png) no-repeat center center;

二、代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标移动到元素上方显示 / 移出盒子范围隐藏案例</title>
	<style>
		/* 最外层的父容器元素 */
		.box {
			/* 子绝父相 : 子元素需要使用绝对定位相互覆盖 
						 父元素必须设置相对定位 */
			position: relative;

			/* 内存尺寸 300 x 300 像素 */
			width: 300px;
			height: 300px;

			/* 垂直方向设置 100 像素上下边距
			   水平方向设置 浏览器窗口 居中 */
			margin: 100px auto;

			background-color: pink;
		}

		/* 设置底部显示内容 用于撑开 a 链接尺寸
		   也可以直接设置 a 链接的尺寸 */
		.two {
			/* 内存尺寸 300 x 300 像素 */
			width: 300px;
			height: 300px;
			background-color: blue;
		}

		/* 半透明遮罩 开始时是隐藏的 鼠标移动到 a 链接后显示该元素 */
		.one {
			/* 先设置隐藏元素 */
			display: none;

			/* 设置相对定位 可以显示在父容器任意位置 */
			position: absolute;
			top: 0;
			left: 0;

			/* 内存尺寸 300 x 300 像素 */
			width: 300px;
			height: 300px;

			/* 设置背景 背景颜色 + 背景图片
			   背景颜色为黑色半透明
			   背景图片 不平铺 只显示 1 个 显示在正中心 */
			background: rgba(0, 0, 0, .3) url(bg.png) no-repeat center center;
		}
		/* 鼠标经过时 one 作为遮罩 显示出来 */
		.box a:hover .one {
			/* 设置显示元素 none 为隐藏 block 为显示 */
			display: block;
		}
	</style>
</head>
<body>
	<div class="box">
		<a href="#">
			<div class="one"></div>
			<div class="two"></div>
		</div>
	</div>
</body>
</html>

显示效果 :