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

news/2024/5/19 22:34:46/

文章目录

  • 一、鼠标移动到元素上方显示 / 移出盒子范围隐藏案例要点分析
    • 1、子绝父相
    • 2、显示隐藏元素对象
    • 3、鼠标经过样式设置
    • 4、半透明遮罩设置
  • 二、代码示例





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




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>

显示效果 :

  • 默认效果 :
    在这里插入图片描述

  • 鼠标移动到元素上方后的效果 :
    在这里插入图片描述


http://www.ppmy.cn/news/47117.html

相关文章

电脑录屏按哪个键?您可以这样操作!

案例&#xff1a;电脑按哪3个键&#xff0c;可以录屏&#xff1f; 【我平常喜欢使用快捷键在电脑上快速完成一些操作。最近接触到了电脑录屏&#xff0c;感觉使用它一系列的操作比较麻烦。想在这里问问小伙伴们&#xff0c;有没有使用快捷键成功操作过的朋友&#xff01;】 电…

软件工程概述

软件工程基础知识点(一) 计算机软件 计算机软件指计算机系统中的程序及其文档 程序是计算任务的处理对象和处理规则的描述 任务&#xff1a;以计算机为处理工具的任务都是计算任务处理对象&#xff1a;数据(如数据、文字、图形、图像、声音等&#xff0c;他们都是表示&#…

PLATO: Pre-trained Dialogue Generation Model with Discrete Latent Variable论文学习

一、大纲内容 二、详细内容 Abstract ○ 对话生成模型可以用于闲聊、知识对话、对话问题生成 ○ 本文 ■ 构建了一个灵活的attention机制&#xff0c;充分的促进了单向和双向的语言生成模型 ■ 介绍了一个离散的潜变量&#xff0c;较好的解决了一问多答的问题 ■ 上述两个结构…

Jenkins 实现自动化部署

安装 windows下安装&#xff1a;https://blog.csdn.net/u014641168/article/details/130286547 linux下安装&#xff1a;https://blog.csdn.net/u014641168/article/details/130282439 Jenkins支持JDK1.8对应版本说明&#xff1a;https://blog.csdn.net/u014641168/article/…

OpenCV实例(一)人脸检测

OpenCV实例&#xff08;一&#xff09;人脸检测 1.人脸检测和识别概述2.使用OpenCV进行人脸检测2.1静态图像中的人脸检测2.2视频中的人脸检测 作者&#xff1a;Xiou 1.人脸检测和识别概述 计算机视觉使很多任务成为现实&#xff0c;其中两项任务就是人脸检测&#xff08;在图…

【游戏开发】自从遇见了口袋方舟后,我的世界变得精彩了起来

文章目录 前言口袋方舟编辑器口袋方舟训练营第一款游戏&#xff1a;四季跑酷第二款游戏&#xff1a;梦境逃脱个人感受 其他 说起游戏开发&#xff0c;我不允许还有人不知道口袋方舟编辑器&#xff01; 前言 一直想写一篇博客来感谢口袋方舟&#xff0c;同时记录自己第一次游戏…

程序员工作久了,都不会好好说人话了...互联网人的....黑话

原来工作也是会被腌入味的 前段时间有位博主吐槽 工作太久都不会说人话了 这张口的互联网味儿 瞬间梦回自己的工位 而评论区的网友们表示 这不就是”世另我“吗 一场关于互联网黑话的"掰头" 就此开始了... 维护厨房 &#xff08;厨房秒变公司&#xff09; 新…

全国青少年信息素养大赛图形化编程初赛·模拟三卷,含答案解析

目录 一、单选题 打印文章下载进行做题: 全国青少年电子信息智能创新大赛 图形化编程选做题模拟三卷 一、单选题 1. 要使以下代码运行后画出如图所示三角形风车,

【每日一题Day178】LC1042不邻接植花 | 位运算 + 枚举

不邻接植花【LC1042】 有 n 个花园&#xff0c;按从 1 到 n 标记。另有数组 paths &#xff0c;其中 paths[i] [xi, yi] 描述了花园 xi 到花园 yi 的双向路径。在每个花园中&#xff0c;你打算种下四种花之一。 另外&#xff0c;所有花园 最多 有 3 条路径可以进入或离开. 你需…

隐私计算:多方安全计算,联邦学习,可信执行环境可信执行环境

目录 隐私计算 多方安全计算 联邦学习 可信执行环境可信执行环境 隐私计算 隐私计算既能够联合各方进行训练学习,又能保证各方私密教据不被泄露。隐私计算技术可归纳为三类 数据加密与再处理、数据不动而模型动、

2. 算法分析

2. 算法分析 研究算法的最终目的就是如何花更少的时间&#xff0c;如何占用更少的内存去完成相同的需求。 我们要计算算法时间耗费情况&#xff0c;首先我们得度量算法的执行时间&#xff0c;那么如何度量呢&#xff1f; 2.1 算法的时间复杂度分析 事后分析估算方法&#x…

微任务宏任务详解题目

注意点&#xff1a;我们的异步任务1和异步任务2并不是直接放在任务队列里面&#xff0c;而是先挂载到我们相应的线程下面&#xff01;&#xff01;&#xff01; 假如说我们的宏任务执行得很快&#xff0c;100ms就执行完了&#xff0c;那么我们就会去轮询我们的任务队列&#x…

【OS实验】【学习笔记】

文章目录 零、实验参考实验1 熟悉实验环境实验2 操作系统的引导实验3 系统调用实验4 进程运行轨迹的跟踪与统计实验5 基于内核栈切换的进程切换实验6 信号量的实现和应用实验7 地址映射与共享实验8 终端设备的控制实验9 proc文件系统的实现Reference 零、实验参考 &#x1f52…

【C++入门必备知识:|引用| +|auto关键字| + |范围for|】

【C入门必备知识&#xff1a;|引用| |auto关键字| |范围for|】 ①.引用Ⅰ.引用概念Ⅱ.引用使用Ⅲ.引用特性Ⅳ.使用场景1.做函数参数意义&#xff1a; 2.做函数返回值意义&#xff1a; Ⅵ.常引用Ⅶ.引用与指针区别 ②.auto关键字1.使用规则 ③.基于范围的for循环1.使用规则 在这…

代码随想录二刷-栈及其相关题目(JS)

20.有效的括号 题目 力扣题目链接 给定一个只包括 ‘(’&#xff0c;‘)’&#xff0c;‘{’&#xff0c;‘}’&#xff0c;‘[’&#xff0c;‘]’ 的字符串&#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须…

Qt5 和 OpenCV4 计算机视觉项目:6~9

原文&#xff1a;Qt 5 and OpenCV 4 Computer Vision Projects 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【ApacheCN 计算机视觉 译文集】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 当别人说你没有底线的时候&#x…

图片加水印的简单方法

图片加水印的简单方法~许多小伙伴都习惯在需要对外发布的图片上添加水印&#xff0c;添加水印后就不必担心图片被盗用或被用于其它不良目的&#xff0c;给我们造成不好的影响。然而&#xff0c;许多用户不知道如何为图片添加水印&#xff0c;也不知道应该选择哪种软件来进行操作…

技术选型|日志采集和管理工具您都了解哪些,看这篇就够了

简介 对于日志管理当前网络上提供了大量的日志工具&#xff0c;今天就给大家分析总结一下这些常用工具的特点&#xff0c;希望对你们在选型时有所帮助&#xff0c;如果有用记得一键三连。 1、Filebeat Filebeat是用于转发和集中日志数据的轻量级传送程序。作为服务器上的代理…

GPT问答记录:微信小程序动态tabBar开发配置(服务端+前端代码)

问&#xff1a;我正在开发一款微信小程序&#xff0c;原先是在app.json配置的tabBar&#xff0c;现在我想通过java后台动态控制tabBar&#xff0c;我应该如何修改我的代码&#xff1f;请给出具体方案&#xff0c;以及相应的数据库表设计以及java代码还有小程序wxml&#xff0c;…

金蝶即将推出“类GPT ”产品,ToB 企业如何落地生成式AI?

今年以来&#xff0c;ChatGPT 成为 IT 圈的“顶流”&#xff0c;在业内掀起热潮&#xff0c;成为科技圈追逐的新风向。 在 ToB 领域&#xff0c;很多软件原有RPA、AI、低代码能力&#xff0c;来帮助员工提高生产力和管理者进行智能决策。那么ChatGPT 作为新的 AI 技术&#xf…