当前位置： 首页 > news >正文

HTML实现弹出层

news 2026/4/8 9:02:25

leopard/ˈlepərd/ 豹子，豹纹

弹出层指的是鼠标悬停于某个元素之上时显示的一个界面组件。

关注和理解特性：z-index属性和动态生成HTML元素。

HTML5新增：

figure:媒体内容(图像，音频，视频)，用于包含一组相关元素。

figcaption:为figure提供说明性文本，在figure中只能有一个，并且在第一个或者最后一个位置。

并排显示：某度上的图片

 代码：6.3.弹出层.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>figure {width: 144px;height: 153px;margin: 20px 20px;border: 1px solid #666;position: relative;float: left;}img {width: 144px;height: 153px;display: block;}</style>
</head><body><figure><img src="img/pink.jpg" alt="pink heels" /><figcaption><h3>Pink Platforms</h3><a href="#">More info</a></figcaption></figure><figure class="click_me"><img src="img/baowen.jpg" alt="baowen heels" /><figcaption><h3>Leopard Platforms</h3><a href="#">More info</a></figcaption></figure><figure class="click_me"><img src="img/red.jpg" alt="red heels" /><figcaption><h3>Red Platforms</h3><a href="#">More info</a></figcaption></figure>
</body></html>

6.3.1 堆叠上下文z-index

隐藏弹出层，悬停显示弹出层

增加CSS：

figcaption {display: none;/* 隐藏弹出层 */position: absolute;/* 相对于容器 */left: 74%;/* 放到右边 */top: 15px;width: 130px;/* 弹出层宽度 */padding: 10px;/* 弹出层内边距 */background-color: #f2eaea;border: 3px solid red;border-radius: 6px;}/* 鼠标悬停在图片上显示 */figure:hover figcaption {display: block;}figcaption h3 {/*弹出层的内容*/font-size: 14px;color: #666;margin-bottom: 6px;}figcaption a {/*弹出层的内容*/display: block;text-decoration: none;font-size: 12px;color: #000;}/* 把弹出层设置为最高层 */figure:hover figcaption {display: block;z-index: 2;}

6.3.2 用CSS创造三角形

用div来创建，角上是平分的，所以要是内部宽高为0，其他边透明，正好是三角形。

代码:

div {border: 12px solid;width: 0;height: 0;border-color: transparent red transparent transparent;
}

与伪元素after结合起来,在6.3.弹出层.html中增加CSS:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>figure {width: 144px;height: 153px;margin: 20px 20px;border: 1px solid #666;position: relative;float: left;}img {width: 144px;height: 153px;display: block;}figcaption {display: none;/* 隐藏弹出层 */position: absolute;/* 相对于容器 */left: 74%;/* 放到右边 */top: 15px;width: 130px;/* 弹出层宽度 */padding: 10px;/* 弹出层内边距 */background-color: #f2eaea;border: 3px solid red;border-radius: 6px;}/* 鼠标悬停在图片上显示 */figure:hover figcaption {display: block;}figcaption h3 {/*弹出层的内容*/font-size: 14px;color: #666;margin-bottom: 6px;}figcaption a {/*弹出层的内容*/display: block;text-decoration: none;font-size: 12px;color: #000;}/* 把弹出层设置为最高层 */figure:hover figcaption {display: block;z-index: 2;}/* 红色三角形盒子 */figcaption::after {content: "";position: absolute;border: 12px solid;border-color: transparent red transparent transparent;height: 0px;width: 0px;top: 17px;right: 100%;}</style>
</head><body><figure><img src="img/pink.jpg" alt="pink heels" /><figcaption><h3>Pink Platforms</h3><a href="#">More info</a></figcaption></figure><figure class="click_me"><img src="img/baowen.jpg" alt="baowen heels" /><figcaption><h3>Leopard Platforms</h3><a href="#">More info</a></figcaption></figure><figure class="click_me"><img src="img/red.jpg" alt="red heels" /><figcaption><h3>Red Platforms</h3><a href="#">More info</a></figcaption></figure>
</body></html>

相关文章：

HTML实现弹出层

leopard/ˈlepərd/ 豹子&#xff0c;豹纹 弹出层指的是鼠标悬停于某个元素之上时显示的一个界面组件。 关注和理解特性&#xff1a;z-index属性和动态生成HTML元素。 HTML5新增&#xff1a; figure:媒体内容(图像&#xff0c;音频&#xff0c;视频)&#xff0c;用于包含一…...

编程日记 2024/8/12 13:28:38

Android控件详解

在Android应用程序中&#xff0c;界面由布局和组件组成。布局相当于框架&#xff0c;而控件则是框架里面的内容。了解过Android布局后&#xff0c;如果要设计ui界面&#xff0c;还需要了解和掌握各个控件的应用。 一个界面的设计&#xff0c;先从创建容器开始&#xff0c;再向…...

编程日记 2024/8/12 13:25:34

记忆化搜索专题篇

目录 斐波那契数 不同路径 最长递增子序列 猜数字大小II 矩阵中的最长递增路径 声明&#xff1a;下面将主要使用递归记忆化搜索来解决问题&#xff01;&#xff01;&#xff01; 斐波那契数 题目 思路 斐波那契数的特点就是除了第一个数是0&#xff0c;第二个数是1&…...

编程日记 2024/8/12 13:24:32

入网测评检查项大全（安全资料）

1. Linux操作系统 2. Windows操作系统 3. Tomcat中间件 4. Nginx中间件 5. Mysql数据库 6. Weblogic中间件 7. Oracle数据库 8. Redis数据库 9. 达梦数据库 10. 应用系统 11. 渗透测试 13 .AIX操作系统 14 .中创中间件 15 .IIS中间件 16 .Apache中间件 17 .Mari…...

编程日记 2024/8/12 13:22:30

uni-app 开发App时调用uni-push 实现在线系统消息推送通知 保姆教程

一、引言 在开发App时避免不了需要推送系统通知&#xff0c;以提高用户的使用体验。在自己的一个工具型的小app上全流程接入了uni-push2.0的推送能力&#xff0c;做个记录&#xff0c;以防后期需要用到。在阅读本教程前最好先看看官方文档&#xff0c;结合官方文档使用&#xf…...

编程日记 2024/8/12 13:21:29

13.StringRedisTemplete使用

上一篇说到改变了RedisTemplate的默认序列化器后&#xff0c;在redis中存入Java对象后&#xff0c;在redis中的呈现是&#xff1a;会记录类的字节码 这也是代码中可以强制装换为对应的java对象的原因&#xff1a; Test void testStudent() {redisTemplate.opsForValue().set(&q…...

编程日记 2024/8/12 13:19:28

[工具]-gitee+pycharm-配置

安装git ​ 查看git是否安装设置成功&#xff1a; ​ git config user.name ​ git config user.email ​ 码云账号设置邮箱 pycharm设置gitee 打开 PyCharm&#xff0c;在 Settings - Plugins 里面&#xff0c;搜索 Gitee 插件&#xff0c;安装后重启 PyCharm。 pychar…...

编程日记 2024/8/12 13:18:26

中间件是一种在客户端和服务器之间进行通信和处理的软件组件或服务

中间件是一种在客户端和服务器之间进行通信和处理的软件组件或服务。中间件位于应用程序和操作系统之间&#xff0c;可以提供一些功能&#xff0c;如请求转发、数据转换、安全性和身份验证、日志记录等。 中间件的主要作用是将应用程序与底层基础设施解耦&#xff0c;提供了一…...

编程日记 2024/8/12 13:16:25

RCE-eval长度限制突破技巧

目录 一、长度17的限制绕过 1、最简单的绕过 &#xff08;一&#xff09;绕过 &#xff08;二&#xff09;编写一句话木马 2、文件包含的利用 &#xff08;一&#xff09;远程文件包含的利用 &#xff08;二&#xff09;本地文件包含的利用 3、usort绕过 &#xff08…...

编程日记 2024/8/12 13:08:16

【黑马】MyBatis

目录 MyBatis简介JDBC缺点&#xff1a;MyBatis针对于JDBC进行简化&#xff0c;简化思路&#xff1a; MyBatis快速入门具体构建步骤解决SQL映射文件的警告提示 Mapper代理开发案例&#xff1a;使用Mapper代理方式完成案例具体步骤详解&#xff1a;Mapper代理方式 Mapper核心配置…...

编程日记 2024/8/12 13:03:10

oracle创建dblink使得数据库A能够访问数据库B表LMEAS_MFG_FM的数据

1、给数据库A普通用户CMRONLINE相应的权限&#xff0c;在sys用户下执行以下语句 GRANT CREATE DATABASE LINK TO CMRONLINE; GRANT DROP PUBLIC DATABASE LINK TO CMRONLINE; GRANT CREATE PUBLIC DATABASE LINK TO CMRONLINE; 2、在数据库A用户 CMRONLINE下执行创建语句&…...

编程日记 2024/8/12 13:02:09

git config 如何配置用户账户

Git配置用户账户主要涉及设置用户名和邮箱地址&#xff0c;这是Git进行版本控制时用于标识提交者身份的重要信息。以下是如何配置Git用户账户的详细步骤&#xff1a; 1. 打开命令行工具 首先&#xff0c;需要打开命令行工具&#xff08;如CMD、Terminal或Git Bash等&#xff…...

编程日记 2024/8/12 13:01:08

SpringBoot基础(二)：配置文件详解

SpringBoot基础系列文章 SpringBoot基础(一)&#xff1a;快速入门 SpringBoot基础(二)&#xff1a;配置文件详解 目录 一、配置文件分类二、配置文件优先级1、不同版本优先级2、不同位置优先级 三、配置文件格式1、yml和yaml格式1.1、字符串1.2、布尔类型1.3、整数型1.4、浮点…...

编程日记 2024/8/12 12:57:04

Web安全(一)-靶场搭建过程-基于docker

今天来复习一下web方面的知识 1.1 sqliab环境搭建 基于Centos 和Docker 1.1.1 Vmware环境安装 这个就略去了吧 博主使用的是vmware17pro 具体的密钥什么的大家懂的都懂 这里就不提供了 接下来 将带大家安装centos7的镜像 为了方便操作 这里选择 centos7_minimal 地址如下:…...

编程日记 2024/8/12 12:55:02

【JavaEE】单例模式和阻塞队列

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【Java】登神长阶 史诗般的Java成神之路 &#x1f56f;️一.设计模式 ​ 在Java中&#xff0c;设计模式&#xff08;Design Patterns&#xff09;是指在软件工程和面向对象编程中&#xff0c;针对特定…...

编程日记 2024/8/12 12:54:01

RCE绕过技巧

目录 EVAL长度限制突破技巧 1.使用反引号 2.file_put_contents写入文件 3.php5.6变长参数usort回调后门 命令长度限制突破技巧 1.拼接文件名 无字母数字的webshell命令执行 1.取反码 2.上传临时文件 EVAL长度限制突破技巧 分析代码&#xff1a;首先传递一个param参数&…...

编程日记 2024/8/12 12:52:58

Spring源码解析(31)之事务配置文件解析以及核心对象创建过程

一、前言 首先我们先准备一下spring 事务的配置文件&#xff0c;具体内容如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/20…...

编程日记 2024/8/12 12:46:53

win11安装docker报错记录

报错一&#xff1a; Docker Desktop - Unexpected WSL error An unexpected error occurred while executing a WSL command. Either shut down WSL down with wsl --shutdown, and/or reboot your machine. You can also try reinstalling WSL and/or Docker Desktop. If t…...

编程日记 2024/8/12 12:44:52

【vulnhub】CLAMP 1.0.1靶机

信息收集 靶机发现 端口扫描 页面访问&#xff0c;并查看源码 访问 /nt4stopc/,下面有一些问题&#xff0c;提示必须收集答案 一些判断题&#xff0c;对与错对应1与0&#xff0c;最后结果为0110111001&#xff0c;拼接访问 点击图中位置&#xff0c;发现存在参数&#xff0c;p…...

编程日记 2024/8/12 12:42:50

GPS跟踪环路MATLAB之——数字锁相环

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 GPS跟踪环路MATLAB之——数字锁相环 前言为什么要锁相环科斯塔斯环锁相环的一些基本概念1、捕获、锁定与跟踪的概念2、捕获时间和稳态相差3、相位捕获和频率捕获4、捕获带和同…...

编程日记 2024/8/12 12:41:48

如何快速上手Scala Exercises：面向初学者的完整入门指南

如何快速上手Scala Exercises&#xff1a;面向初学者的完整入门指南 【免费下载链接】scala-exercises The easy way to learn Scala. 项目地址: https://gitcode.com/gh_mirrors/sc/scala-exercises Scala Exercises是一个基于Scala编程语言的开源交互式学习平台&#…...

编程新知 2026/4/8 7:30:04

Qwen2.5-1.5B效果展示：金融术语解释+财报摘要生成准确率实测

Qwen2.5-1.5B效果展示&#xff1a;金融术语解释财报摘要生成准确率实测 1. 测试背景与目的 在金融领域&#xff0c;准确理解专业术语和快速分析财务报告是两项核心需求。传统方式需要专业人士花费大量时间进行解释和分析&#xff0c;而AI模型的出现让自动化处理成为可能。 本…...

编程新知 2026/4/8 6:22:11

balance_callbacks及cpu offline的相关细节

一、背景 之前的博客 cpu的possible present online active的mask细节 和 cpu hotplug的调用链整理 里，我们讲述了cpu online的状态及相关细节，cpu online和offline的状态，其实就是镜像地的逻辑，这篇博客里我们讲述__schedule函数，如下图里的__balance_callbacks的相关细…...

编程新知 2026/4/8 6:18:05

精准靶向学习：AFSS让YOLO训练效率提升 1.43~1.70 倍的奥秘

精准靶向学习&#xff1a;AFSS让YOLO训练效率提升 1.43~1.70 倍的奥秘YOLO系列是实时目标检测的首选&#xff0c;推理速度毫秒级&#xff0c;工业场景到处在用。但训练效率低这个问题&#xff0c;让人头疼。 数据&#xff1a;YOLO11s在MSCOCO2017上&#xff0c;推理200FPS&…...

编程新知 2026/4/8 5:19:24

在瑞芯微RK3568上，用Qt5+EGL实现零拷贝离屏渲染的完整避坑指南

瑞芯微RK3568嵌入式平台Qt5EGL零拷贝渲染实战解析 引言&#xff1a;嵌入式图形开发的性能瓶颈与突破 在瑞芯微RK3568这类嵌入式平台上开发图形应用时&#xff0c;开发者常常面临一个核心矛盾&#xff1a;既要满足复杂UI渲染的功能需求&#xff0c;又要兼顾有限的硬件资源。传统…...

编程新知 2026/4/8 4:54:56

从Polling到DAQ：在ASAP2 Studio里提前配置XCP测量通道，提升CANape数据采集效率

从Polling到DAQ&#xff1a;在ASAP2 Studio里提前配置XCP测量通道&#xff0c;提升CANape数据采集效率 在汽车电控测试领域&#xff0c;数据采集的效率和精度直接影响着开发周期和标定质量。传统轮询方式&#xff08;Polling&#xff09;虽然简单易用&#xff0c;但面对现代ECU…...

编程新知 2026/4/8 4:03:23

终极跨平台游戏优化工具迁移指南：从Windows到Linux/macOS的完整解决方案

终极跨平台游戏优化工具迁移指南&#xff1a;从Windows到Linux/macOS的完整解决方案 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper DLSS Swapper是一款强大的游戏优化工具&#xff0c;专为管理NVIDIA DLSS、AMD FSR和…...

编程新知 2026/4/8 3:57:22

OpenClaw二次开发入门：Phi-3-mini-128k-instruct模型适配改造

OpenClaw二次开发入门&#xff1a;Phi-3-mini-128k-instruct模型适配改造 1. 为什么需要自定义模型适配 去年我在尝试用OpenClaw自动化处理技术文档时&#xff0c;发现官方支持的模型在长文本生成任务上表现不稳定。当时手头正好有Phi-3-mini-128k-instruct的部署实例&#x…...

编程新知 2026/4/8 3:53:21

刷题不再难：用代码随想录和Hot100打造你的算法思维

算法思维跃迁&#xff1a;从代码随想录到Hot100的实战精进指南 1. 算法能力提升的黄金路径 在技术面试中&#xff0c;算法能力往往是区分候选人的关键指标。但许多开发者在刷题过程中常陷入"刷了就忘"的困境&#xff0c;缺乏系统性训练方法。本文将揭示如何通过代码随…...

编程新知 2026/4/8 3:35:12

2026年西安市莲湖区Geo搜索优化排名，专业企业究竟谁能拔得头筹？

在数字化浪潮席卷的今天&#xff0c;Geo搜索优化&#xff08;地理搜索优化&#xff09;对于企业的重要性不言而喻。尤其在西安市莲湖区&#xff0c;企业们对于提升自身在Geo搜索中的排名需求愈发迫切。究竟哪家专业企业能够在2026年的竞争中脱颖而出&#xff0c;成为Geo搜索优化…...

编程新知 2026/4/8 3:16:00