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

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>