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

【H5】使用 JavaScript 和 CSS 来完成实现鼠标接触时显示一个图片弹窗

以下是一个示例,演示了如何在鼠标接触时显示一个图片弹窗:

HTML:

<a href="#" class="popup-link" target="_blank"><i class="fab fa-weixin"></i>
</a><div id="popup-container"><img src="your-image-url" alt="Popup Image">
</div>

CSS:

#popup-container {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 400px;height: 300px;background-color: #fff;padding: 20px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}.popup-link:hover + #popup-container {display: block;
}

JavaScript (如果需要动态控制弹窗的显示和隐藏):

var popupLink = document.querySelector('.popup-link');
var popupContainer = document.querySelector('#popup-container');popupLink.addEventListener('mouseover', function() {popupContainer.style.display = 'block';
});popupLink.addEventListener('mouseout', function() {popupContainer.style.display = 'none';
});

在这个示例中,我们首先创建了一个带有图标的链接 <a> 元素,并为其添加了 popup-link 类。然后,我们创建了一个包含图片的弹窗容器 <div>,并为其添加了 popup-container ID。通过 CSS,我们设置了弹窗容器的样式,并使用 display: none 将其隐藏。

在 CSS 中,我们使用兄弟选择器 + 来选择弹窗容器,当鼠标悬停在带有 popup-link 类的链接元素上时,通过 display: block 将弹窗容器显示出来。

如果你希望通过 JavaScript 动态控制弹窗的显示和隐藏,可以使用 mouseovermouseout 事件监听器来监听鼠标接触事件,并在事件发生时更新弹窗容器的显示状态。

请确保将 your-image-url 替换为实际的图片 URL。

相关文章:

【H5】使用 JavaScript 和 CSS 来完成实现鼠标接触时显示一个图片弹窗

以下是一个示例&#xff0c;演示了如何在鼠标接触时显示一个图片弹窗&#xff1a; HTML: <a href"#" class"popup-link" target"_blank"><i class"fab fa-weixin"></i> </a><div id"popup-containe…...

CSS选择器分类梳理并高亮重点

前言 主要内容来自菜鸟教程 CSS 选择器 | 菜鸟教程 分类是我自己理解的分类&#xff0c;示例说明优化统一了表述风格。 正文 选择器CSS示例示例说明基础*2*选择所有元素:root3:root选择文档的根元素element1p选择所有<p>元素:not(selector)3:not(p)选择所有并非p元素…...

Python批量给excel文件加密

有时候我们需要定期给公司外部发邮件&#xff0c;在自动化发邮件的时候需要对文件进行加密传输。本文和你一起来探索用python给单个文件和批量文件加密。    python自动化发邮件可参考【干货】用Python每天定时发送监控邮件。 文章目录 一、安装pypiwin32包二、定义给excel加…...

程序设计 树基础

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…...

Java 并发编程与CAS基本原理

一、Java并发基础知识 Java里的程序天生就是多线程的&#xff0c;那么有几种新启线程的方式&#xff1f; 两种,启动线程的方式只有&#xff1a; 1、X extends Thread;&#xff0c;然后X.start&#xff1b; 2、X implements Runnable&#xff1b;然后交给Thread运行。 Java…...

qt creater运行按钮灰色,问题记录

第一次安装还没运行就出了三个错误&#xff1a; 1.F:\wei\Qt\Tools\CMake_64\share\cmake-3.24\Modules\CMakeTestCXXCompiler.cmake:62: error: The C compiler "C:/Program Files (x86)/Microsoft Visual Studio 14.0/VC/BIN/amd64/cl.exe" is not able to compil…...

【jvm】类加载器的分类

目录 一、说明二、示例2.1 代码2.2 截图 三、启动类加载器四、扩展类加载器五、应用程序类加载器 一、说明 1.jvm支持两种类型的类加载器&#xff0c;分别是引导类加载器&#xff08;bootstrap classloader&#xff09;和自定义类加载器&#xff08;user-defined classloader&a…...

电路基础之电容

电容器&#xff08;Capacitor&#xff09;是由两个导体电极之间夹着一个电介质而组成的元件。这两个电极可以是金属板、箔片、涂层等&#xff0c;而电介质则是放置在电极之间的绝缘材料。电容器的基本构成包括以下几个要素&#xff1a; 电极&#xff1a;电容器的电极是两个导体…...

函数柯里化

文章目录 基本概念柯里化&#xff08;Currying&#xff09;是什么&#xff1f;通用的柯里化实现ES5 实现ES6 实现 基本概念 在讲柯里化之前我们先来了解一些基本概念&#xff1a; Function.length&#xff1a; length 属性指明函数的形参个数 function func1() {} function …...

【HBZ分享】ES中的Reindex重建索引

Reindex如何实现索引重建&#xff1f; 滚动索引 批量复制 Reindex存在的问题 如果新的索引没有提前创建好&#xff0c;并指定字段类型&#xff0c;那么重建后的新索引类型极有可能会和旧的索引不一致&#xff0c;因为ES他会推断类型&#xff0c;而推断错误率从实战来说那是…...

【PostgreSQL】几个提高性能的小特性

一、LOCALE 与 “operator class” 在PostgreSQL里&#xff0c;LOCALE默认使用C的本地化规则。LOCALE是一种文化偏好的区域设置&#xff0c;包括字母表、排序、数字格式等。 LOCALE里有一个比较重要的规则LC_COLLATE&#xff0c;即排序方式(Collation)&#xff0c;它会对数据…...

[C语言] 指针

1. 指针是什么 2. 指针和指针类型 3. 野指针 4. 指针运算 5. 指针和数组 6. 二级指针 7. 指针数组 目录 1. 指针是什么&#xff1f; 2. 指针和指针类型 2.1 指针-整数 2.2 指针的解引用 3. 野指针 3.1 野指针成因 3.2 如何规避野指针 4. 指针运算 4.1 指针…...

win10在vmware15中安装macos10.13系统

第一步、安装vmware版本信息如下 第二步、下载unlocker-main和darwin.iso放到安装文件夹 第三步、管理员身份运行win-install.cmd 第四步、运行vmware新建虚拟机 第五步、启动新创建的虚拟机macOS 10.13并选择语言 第六步、选择磁盘工具抹掉磁盘 第七步、格式化完成后退出磁盘工…...

Node.js:实现遍历文件夹下所有文件

Node.js&#xff1a;实现遍历文件夹 代码如下 const fs require(fs) const path require(path)function traverseFolder(folderPath) {// 读取文件夹列表const files fs.readdirSync(folderPath)// 遍历文件夹列表files.forEach(function (fileName) {// 拼接当前文件路径…...

Git详解及使用

Git简介 Git 是一种分布式版本控制系统&#xff0c;它可以不受网络连接的限制&#xff0c;加上其它众多优点&#xff0c;目前已经成为程序开发人员做项目版本管理时的首选&#xff0c;非开发人员也可以用 Git 来做自己的文档版本管理工具。 大概是大二的时候开始接触和使用Gi…...

Jmeter设置中文的两种方式,建议使用第二种

方案一 进入jmeter图像化界面&#xff0c;选择Options下的Choose Language&#xff0c;再选择Chinese(Simplified)。这个就是选择语言为简体中文&#xff08;缺陷&#xff1a;这个只是在本次使用时为中文&#xff0c;下次打开默认还是英文的&#xff09; 方案二&#xff08;…...

【ARM 嵌入式 编译系列 7.1 -- GCC 链接脚本中节区及各个段的详细介绍】

文章目录 什么是Section(节区)输入文件常见节区有哪些&#xff1f;什么是 glue code&#xff1f;.glue_7和.glue_7的作用是什么&#xff1f;链接脚本中的 KEEP 关键字是什么呢作用&#xff1f;链接脚本中的 PROVIDE 关键字是什么呢作用&#xff1f; 上篇文章&#xff1a;ARM 嵌…...

一文读懂HTML

文章目录 HTML的历史HTML的作用HTML的基本语言 HTML的历史 HTML&#xff08;HyperText Markup Language&#xff09;的历史可以追溯到20世纪90年代早期&#xff0c;它是互联网发展的重要里程碑之一。以下是HTML的历史概述&#xff1a; 早期阶段&#xff08;1980年代末 - 1990年…...

MOCK测试

介绍 mock&#xff1a;就是对于一些难以构造的对象&#xff0c;使用虚拟的技术来实现测试的过程。 mock测试&#xff1a;在测试过程中&#xff0c;对于某些不容易构造或者不容易获取的对象&#xff0c;可以用一个虚拟的对象来代替的测试方 法。 接口Mock测试&#xff1a;在接口…...

Flutter源码分析笔记:Widget类源码分析

Flutter源码分析笔记 Widget类源码分析 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netEmail: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263/article/details/132259681 【介绍】&#x…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...