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

CSS实现当鼠标悬停在一个元素上时，另一个元素的样式发生变化的效果

news 来源：原创 2025/8/5 21:35:40

CSS可以实现当鼠标悬停在一个元素上时，另一个元素的样式发生变化的效果。可以通过以下几种方法来实现：

1. 使用兄弟选择器（Adjacent Sibling Selector）

如果两个元素是兄弟关系（即它们有相同的父元素），可以使用 + 或 ~ 选择器来实现。

示例代码：

<style>.element1:hover + .element2 {background-color: yellow;}
</style><div class="element1">悬停在我上面</div>
<div class="element2">另一个元素</div>

在这个例子中，当鼠标悬停在 .element1 上时，.element2 的背景颜色会变为黄色。

2. 使用通用兄弟选择器（General Sibling Selector）

如果两个元素是兄弟关系，但不一定是紧邻的，可以使用 ~ 选择器。

示例代码：

<style>.element1:hover ~ .element2 {background-color: yellow;}
</style><div class="element1">悬停在我上面</div>
<div class="element3">其他元素</div>
<div class="element2">另一个元素</div>

在这个例子中，当鼠标悬停在 .element1 上时，所有后续的 .element2 元素的背景颜色会变为黄色。

3. 使用父选择器（Parent Selector）

如果两个元素是父子关系，可以通过父选择器来实现。

示例代码：

<style>.parent:hover .child {background-color: yellow;}
</style><div class="parent"><div class="child">悬停在父元素上时，我的背景会变黄</div>
</div>

在这个例子中，当鼠标悬停在 .parent 上时，.child 的背景颜色会变为黄色。

4. 使用 CSS 变量（CSS Variables）

如果需要更复杂的控制，可以使用 CSS 变量来动态改变样式。

示例代码：

<style>:root {--color: white;}.element1:hover {--color: yellow;}.element2 {background-color: var(--color);}
</style><div class="element1">悬停在我上面</div>
<div class="element2">另一个元素</div>

在这个例子中，当鼠标悬停在 .element1 上时，CSS 变量 --color 会被设置为黄色，从而影响 .element2 的背景颜色。

5. 使用 JavaScript

如果 CSS 的选择器无法满足需求，可以使用 JavaScript 来实现更复杂的交互。

示例代码：

<style>.element2 {background-color: white;}
</style><div class="element1" onmouseover="changeStyle()" onmouseout="resetStyle()">悬停在我上面</div>
<div class="element2" id="element2">另一个元素</div><script>function changeStyle() {document.getElementById('element2').style.backgroundColor = 'yellow';}function resetStyle() {document.getElementById('element2').style.backgroundColor = 'white';}
</script>

在这个例子中，当鼠标悬停在 .element1 上时，JavaScript 会改变 .element2 的背景颜色。

基于以上几种方法，可以实现鼠标悬停在一个元素上时，另一个元素的样式发生变化的效果。选择哪种方法取决于具体的布局和需求。

CSS实现当鼠标悬停在一个元素上时，另一个元素的样式发生变化的效果

CSS可以实现当鼠标悬停在一个元素上时，另一个元素的样式发生变化的效果。可以通过以下几种方法来实现： 1. 使用兄弟选择器（Adjacent Sibling Selector） 如果两个元素是兄弟关系（即它们有相同的父元素）&am…...

编程日记 2025/8/5 21:35:40

【C++11】左值引用、右值引用、移动语义和完美转发

🦄个人主页:修修修也 🎏所属专栏:C ⚙️操作环境:Visual Studio 2022 目录 📌左值引用和右值引用 🎏左值和左值引用 🎏右值和右值引用 📌左值引用和右值引用比较 🎏左值引用 🎏右值…...

编程日记 2025/8/3 12:11:00

Docker镜像迁移

目录 1.查看镜像当前配置 2.镜像迁移 1. 停止 Docker Desktop 2. 关闭 WSL 实例（若基于 WSL 2） 4. 导出原镜像数据 5.注销原实例 6. 导入数据到新路径 7. 设置 Docker Desktop 使用新路径（可选） 8. 启动 Docker Desktop …...

编程日记 2025/8/5 4:20:00

Compose 实践与探索十五 —— 自定义触摸

1、自定义触摸与一维滑动监测之前我们在讲 Modifier 时讲过如下与手势检测相关的 Modifier： Modifier.clickable { } Modifier.combinedClickable { } Modifier.pointerInput {detectTapGestures { } }这里对以上内容就不再赘述了，直接去讲解更复杂的…...

编程日记 2025/8/2 19:46:55

第P8周：YOLOv5-C3模块实现

🍨 本文为🔗365天深度学习训练营中的学习记录博客 🍖 原作者：K同学啊 1. 模块组成 C3 模块由卷积层（Convolutional layers）、激活函数（Activation functions） 和残差连接&#…...

编程日记 2025/7/29 17:55:35

知识蒸馏：让大模型“瘦身“而不失智慧的魔术

引言：当AI模型需要"减肥" 在人工智能领域，一个有趣的悖论正在上演：大模型的参数规模每年以10倍速度增长，而移动设备的算力却始终受限。GPT-4的1750亿参数需要价值500万美元的GPU集群运行，但现实中的智能设备…...

编程日记 2025/8/1 18:36:31

`docker commit`和`docker tag`

1.docker commit docker commit是一个 Docker 命令，用于将一个正在运行的容器（Container）的状态提交为一个新的镜像（Image）。这类似于在版本控制系统中提交更改。作用 • 当你对一个容器进行了修改（例如安…...

编程日记 2025/8/1 1:40:59

构建下一代AI Agent：自动化开发与行业落地全解析

1. 下一代AI Agent：概念与核心能力核心能力描述技术支撑应用价值自主性独立规划与执行任务，无需持续人工干预决策树、强化学习、目标导向规划减少人工干预，提高任务执行效率决策能力评估多种方案并选择最优解决方案贝叶斯决策、多目标优化、…...

编程日记 2025/7/27 1:24:26

项目篇：模拟实现高并发内存池(2)

1.整体框架的设计首先我们要来大概的梳理一下我们的高并发内存池的整体框架设计在现代很多开发环境其实都是多核多线程，在申请内存的情况下，就必然会存在激烈的锁竞争问题。如果我们需要要实现内存池，必须要考虑以下几方面的问题。 1.性…...

编程日记 2025/7/27 18:10:43

PostgreSQL用SQL实现俄罗斯方块

📢📢📢📣📣📣 作者：IT邦德中国DBA联盟(ACDU)成员，10余年DBA工作经验 Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主，全网粉丝10万擅长主流Oracle、MySQL、PG、高斯…...

编程日记 2025/8/2 22:48:53

强大的AI网站推荐（第二集）—— V0.dev

网站：V0.dev 号称：前端开发神器，专为开发人员和设计师设计，能够使用 AI 生成 React 代码博主评价：生成的UI效果太强大了，适合需要快速创建UI原型的设计师和开发者推荐指数：🌟&…...

编程日记 2025/8/5 1:25:38

田间机器人幼苗视觉检测与护苗施肥装置研究（大纲）

田间机器人幼苗视觉检测与护苗施肥装置研究基于多光谱视觉与精准施肥的农业机器人系统设计第一章绪论 1.1 研究背景与意义农业智能化需求： 传统幼苗检测依赖人工，效率低且易遗漏弱苗/病苗施肥不精准导致资源浪费和环境污染技术挑战：…...

编程日记 2025/8/2 18:57:45

vLLM 同时部署多个模型及调用

目录一、单例加载多模型 （一） 原生多模型支持（vLLM ≥0.3.0） （二） 针对 vLLM 单实例部署多模型时只有最后一个模型生效的问题，结合实际测试和源码分析，以下是具体原因和解决方…...

编程日记 2025/8/5 18:05:14

LeetCode 2680.最大或值：位运算

【LetMeFly】2680.最大或值：位运算力扣题目链接：https://leetcode.cn/problems/maximum-or/ 给你一个下标从 0 开始长度为 n 的整数数组 nums 和一个整数 k 。每一次操作中，你可以选择一个数并将它乘 2 。你最多可以进行 k 次操作&#…...

编程日记 2025/7/31 19:21:08

Python——MySQL数据库编程

MySQL 是现在最流行的关系型数据库管理系统，在 WEB 开发中，MySQL 是最好的 RDBMS 应用软件之一。接下来，让我们快速掌握 python 使用 MySQL 的相关知识，并轻松使用 MySQL 数据库。第1关：python数据库编程之创建数据库…...

编程日记 2025/8/5 17:41:10

AI 如何重塑数据湖的未来

在生成式 AI 与大模型技术飞速发展的今天，数据湖技术正迎来前所未有的挑战与机遇。海量非结构化数据的存储与处理、实时性与计算效率的平衡、高效存储的需求，已成为数据平台的核心难题。如何突破传统架构的局限，构建支持 AI 驱动的高效数据湖…...

编程日记 2025/8/5 8:12:58

C++ - 从零实现Json-Rpc框架-2(服务端模块客户端模块框架设计)

项⽬设计本质上来讲，我们要实现的rpc（远端调⽤）思想上并不复杂，甚⾄可以说是简单，其实就是客⼾端想要完成某个任务的处理，但是这个处理的过程并不⾃⼰来完成，⽽是，将请求发送到服务…...

编程日记 2025/8/1 1:34:51

课程5. 迁移学习

课程5. 迁移学习卷积神经网络架构ImageNet神经网络架构实践从 torchvision 加载模型在一个图像上测试预先训练的网络迁移学习网络训练冻结层实践准备数据替换网络的最后一层冻结层网络训练获取测试样本的质量指标课程计划： 流行的神经网络架构迁移学习卷积神经…...

编程日记 2025/8/3 20:36:55

SATA（Serial Advanced Technology Attachment）详解

一、SATA的定义与核心特性 SATA（串行高级技术附件）是一种用于连接存储设备（如硬盘、固态硬盘、光驱）的高速串行接口标准，取代了早期的PATA（并行ATA）。其核心特性包括： 高速传输&am…...

编程日记 2025/7/31 13:24:33

常用的 MyBatis 标签及其作用

MyBatis 是一个优秀的持久层框架，它通过 XML 或注解的方式将 Java 对象与数据库操作进行映射。在 MyBatis 的 XML 映射文件中，可以使用多种标签来定义 SQL 语句、参数映射、结果映射等。以下是一些常用的 MyBatis 标签及其作用： 1. 基本标签 …...

编程日记 2025/8/2 0:29:28

Blender配置渲染设置并输出动画

在Blender中，渲染设置和渲染动画的选项位于不同的面板中。以下是具体步骤： 渲染设置渲染设置用于配置输出格式、分辨率、帧率等参数。打开右侧的属性面板（按 N 键可切换显示）。点击 “输出属性” 选项卡（图标是…...

编程日记 2025/8/3 21:21:30

网络故障排查指南：分治法与排除法结合的分层诊断手册

目录一、排查方法论：分治法与排除法的结合 1. 分治法（Divide and Conquer） 2. 排除法（Elimination） 二、分层诊断实战手册 1. 物理层排查（设备与线路） 硬件检测三板斧运维经验 2. 网络…...

编程日记 2025/8/3 0:35:07

【万字总结】前端全方位性能优化指南（三）——GPU渲染加速、WebGPU、OffscreenCanvas多线程渲染

theme: condensed-night-purple 前言当每秒60帧的流畅渲染遭遇百万级多边形场景，传统CPU绘图如同单车道上的赛车——即便引擎轰鸣，依然难逃卡顿困局。现代GPU加速技术将渲染任务从「单车道」扩展到「八车道」，本章以分层爆破、API革命、线程联邦为技术支柱，拆解如何通过G…...

编程日记 2025/8/4 15:44:04

报错 - redis - Unit redis.service could not be found.

报错： Unit redis.service could not be found.Could not connect to Redis at 127.0.0.1:6379: Connection refused解决方法： 检查状态、有必要的话重新安装 Linux 上查看状态 systemctl status redis显示以下内容，代表正常服务出现下面…...

编程日记 2025/8/3 19:55:49

Windows系统本地部署OpenManus对接Ollama调用本地AI大模型

文章目录前言1. 环境准备1.1 安装Python1.2. 安装conda 2. 本地部署OpenManus2.1 创建一个新conda环境2.2 克隆存储库2.3 安装依赖环境 3. 安装Ollama4. 安装QwQ 32B模型5. 修改OpenManus配置文件6. 运行OpenManus7.通过网页使用OpenManus8. 安装内网穿透8.1 配置随机公网地址…...

编程日记 2025/8/2 18:54:19

【递归，搜索与回溯算法篇】- 名词解释

一. 递归 1. 什么是递归？ 定义： 函数自己调用自己的情况关键点： ➀终止条件： 必须明确递归出口，避免无限递归 ➁子问题拆分： 问题需能分解成结构相同的更小的子问题缺点： ➀栈溢出风险&#x…...

编程日记 2025/8/4 7:47:51

【设计模式】装饰模式

六、装饰模式装饰(Decorator) 模式也称为装饰器模式/包装模式，是一种结构型模式。这是一个非常有趣和值得学习的设计模式，该模式展现出了运行时的一种扩展能力，以及比继承更强大和灵活的设计视角和设计能力，甚至在有些场合下&am…...

编程日记 2025/8/5 9:26:00

c库、POSIX库、C++库、boost库之间的区别和联系

文章目录一、区别1. 定义和来源2. 功能范围3. 可移植性4. 语言支持5. 维护和更新二、联系1. 相互补充2. 部分功能重叠3. 共同促进编程发展4. 代码兼容性三、总结一、区别 1. 定义和来源 C 库函数：由 ANSI C 和 ISO C 标准定义，是 C 语言编程的基础…...

编程日记 2025/8/3 20:51:46

算法及数据结构系列 - 树

系列文章目录算法及数据结构系列 - 二分查找算法及数据结构系列 - BFS算法算法及数据结构系列 - 动态规划算法及数据结构系列 - 双指针算法及数据结构系列 - 回溯算法文章目录树框架树遍历框架N叉树遍历框架经典题型124.二叉树的最大路径和105.从前序与中序遍历序列构造…...

编程日记 2025/7/30 1:04:55

安装先安装go环境 https://blog.csdn.net/Yqha1/article/details/146430281?fromshareblogdetail&sharetypeblogdetail&sharerId146430281&sharereferPC&sharesourceYqha1&sharefromfrom_link 安装lazydocker go install github.com/jesseduffield/laz…...

编程日记 2025/8/3 8:39:34

《深度学习》——YOLOv3详解

文章目录 YOLOv3简介YOLOv3核心原理YOLOv3改进YOLOv3网络结构 YOLOv3简介 YOLOv3（You Only Look Once, version 3）是一种先进的实时目标检测算法，由 Joseph Redmon 和 Ali Farhadi 开发。它在目标检测领域表现出色，具有速度快、精…...

编程日记 2025/8/3 8:39:29

使用spring-ai-ollama访问本地化部署DeepSeek

创建SpringBoot工程，引入依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"htt…...

编程日记 2025/7/28 23:46:45

Kafka消息自定义序列化

文章目录 1. 默认序列化2.自定义序列化3.示例4.自定义解序列化器 1. 默认序列化在网络中发送数据都是以字节的方式，Kafka也不例外。Apache Kafka支持用户给broker发送各种类型的消息。它可以是一个字符串、一个整数、一个数组或是其他任意的对象类型。序列化器(se…...

编程日记 2025/7/29 13:12:36

使用Systemd管理ES服务进程

Centos中的Systemd介绍 CentOS 中的 Systemd 详细介绍 Systemd 是 Linux 系统的初始化系统和服务管理器，自 CentOS 7 起取代了传统的 SysVinit，成为默认的初始化工具。它负责系统启动、服务管理、日志记录等核心功能，显著提升了系统的启动速…...

编程日记 2025/8/4 12:08:11

编程语言选择分析：C#、Rust、Go 与 TypeScript 编译器优化

编程语言选择分析：C#、Rust、Go 与 TypeScript 编译器优化在讨论编程语言的选择时，特别是针对微软的 C# 和 Rust，以及谷歌的 Go 语言，以及微软试图通过 Go 来拯救 TypeScript 编译器的问题，我们可以从多个角度来分析和…...

编程日记 2025/8/2 18:41:27

使用粘贴控件

HarmonyOS 5.0.3(15) 版本的配套文档，该版本API能力级别为API 15 Release 文章目录约束与限制开发步骤粘贴控件是一种特殊的系统安全控件，它允许应用在用户的授权下无提示地读取剪贴板数据。在应用集成粘贴控件后，用户点击该控件&#xf…...

编程日记 2025/8/3 21:22:25

MySQL 客户端连不上（1045 错误）原因全解析

MySQL 客户端连不上（1045 错误）原因全解析在我们学习 MySQL 或从事 MySQL DBA 工作期间，时常会遇到：“我尝试连接到 MySQL 并且收到1045 错误，但我确定我的用户和密码都没问题”。不管你现在是否是高手还是高高手，都不可避免曾经在初学的时候犯过一些很初级的错误，例…...

编程日记 2025/8/2 16:43:59

麒麟系列Linux发行版探秘

以下内容摘自《银河麒麟操作系统进阶应用》一书。银河麒麟操作系统（Kylin） 银河麒麟（Kylin）操作系统是中国自主研发的一款基于Linux内核的操作系统。它的发展历程可以追溯到2002年，最初由国防科技大学主导研发&…...

编程日记 2025/7/30 12:03:54

刘强东突然发声：不该用算法压榨最底层兄弟！东哥，真正的人民企业家

今天忙了一天，很累，准备睡觉的时候，看到网上盛传的刘强东的朋友圈，东哥又在朋友圈发文了。说实话，看完之后，感动，真的感动。尤其是当我看到这两句话的时候。 1、我们所学的知识、商业模式、技…...

编程日记 2025/8/3 8:51:01

信息收集与问答系统流程分析与改进建议

现有系统的问题与局限 1. 资源管理问题二元决策机制过于简化：当前系统仅在令牌预算耗尽时才进入Beast Mode，缺乏渐进式资源分配策略缺少早期预算规划：没有基于问题复杂度的初始资源分配机制缺乏优先级资源分配：所有问题和策略消…...

编程日记 2025/7/30 9:50:54

【人工智能】如何理解transformer中的token?

如何理解transformer中的token? **一、Token在Transformer中的作用****二、文本分词的常见方法****1. 基于词典的分词（Dictionary-based Tokenization）****2. 子词分词（Subword Tokenization）****(1) WordPiece算法****(2) BPE&a…...

编程日记 2025/8/1 18:46:59

Spring Boot 集成 Kafka 消息发送方案

一、引言在 Spring Boot 项目中，Kafka 是常用的消息队列，可实现高效的消息传递。本文介绍三种在 Spring Boot 中使用 Kafka 发送消息的方式，分析各自优缺点，并给出对应的 pom.xml 依赖。二、依赖引入在 pom.xml 中添加以下依赖： <dependencies><!-- Sprin…...

编程日记 2025/7/28 18:04:01

Hadoop•HDFS的Java API操作

听说这是目录哦上传文件到HDFS🌈一、下载Windows版本的JDK和Hadoop二、配置物理机环境变量三、创建项目四、添加依赖五、新建java类六、创建文件七、打开集群八、选中、运行从HDFS下载文件🪐一、写代码二、HDFS要个文件三、物理机要个文件夹&#xff…...

编程日记 2025/8/1 22:42:26

电脑如何设置几分钟后自动关机

摘要：本文提供Windows、macOS和Linux系统设置定时自动关机的详细方法。目录一、Windows系统设置方法设置定时关机取消关机计划二、macOS系统设置方法设置定时关机取消关机计划三、Linux系统设置方法设置定时关机取消关机计划四、注意事项五、扩展&#x…...

编程日记 2025/7/11 1:11:57

固定公网 IP

固定公网 IP 是指为用户分配一个长期不变且可从互联网直接访问的 IP 地址，具有以下重要作用： 1. 搭建服务器网站托管：可用于托管网站、博客或电子商务平台。应用服务器：支持运行邮件服务器、游戏服务器、数据库等。远程访问&…...

编程日记 2025/8/3 4:55:45

Linux安装go环境

安装一个lazydocker，根据文档需要先安装go环境 https://github.com/jesseduffield/lazydocker 官方文档解析 https://go.dev/doc/install 文档内容如下，一共三步 1.删除先前安装的go，解压下载的go压缩包到/usr/local目录 2.添加环境变量&…...

编程日记 2025/8/4 22:13:57

Git的基本使用

Git的基本使用前言 ：为什么使用GitGit基本操作1. 初始化2. Git分区3. 认识.git目录4. git基本操作 Git分支管理1. 基本操作2. Git分支设计规范 Git 标签管理1. Git标签的使用2. 标签使用规范3. Git标签与分支的区别分离头指针问题1. 分离头指针问题的风险2. 分离头…...

编程日记 2025/7/31 14:28:15