本文详细介绍了如何通过
java
script实现对非关联
html
元素进行悬停交互效果，具体演示了当鼠标悬停在一个`div`上时，如何动态改变另一个`div`的亮度。教程涵盖了html结构、
javascript
事件监听与
css
`filter`属性的应用，并提供了完整的代码示例、平滑过渡效果的实现以及最佳实践建议，旨在帮助开发者创建更具动态性和响应性的网页界面。
在现代
网页设计
中，为用户提供丰富的交互体验至关重要。其中一种常见的需求是，当鼠标悬停在某个元素上时，能够触发其他元素的视觉变化。然而，当这两个元素之间没有直接的父子或兄弟关系时，仅凭CSS的:hover伪类往往难以实现。本文将详细讲解如何利用JavaScript结合CSS的filter属性，实现非关联div元素间的亮度动态调整。
理解挑战：非关联元素间的交互
传统的CSS :hover伪类通常用于改变元素自身或其直接子元素的样式。例如，div:hover { background-color: blue; } 会在鼠标悬停在 div 上时改变 div 的背景色。如果我们需要在 divA 上悬停时改变 divB 的样式，并且 divA 和 divB 既不是父子关系，也不是兄弟关系，那么纯CSS解决方案就会变得非常复杂甚至不可行。在这种情况下，JavaScript就成为了理想的解决方案，因为它能够获取并操作DOM中任何位置的元素。
解决方案：JavaScript与CSS滤镜
要实现当鼠标悬停在一个div上时，另一个div的亮度发生变化，我们可以采用以下策略：
监听事件：
使用JavaScript监听触发元素（例如 #hovertrigger1）的 mou
seo
ver（鼠标进入）和 mouseout（鼠标离开）事件。
修改样式：
在事件触发时，通过JavaScript获取目标元素（例如 #gallery1），并动态修改其CSS filter 属性中的 brightness() 值。
CSS filter 属性允许我们为元素应用各种图形效果，如模糊、亮度、对比度、灰度等。brightness() 函数用于调整元素的亮度，brightness(1) 表示原始亮度，brightness(0) 表示完全黑暗，brightness(0.5) 表示亮度减半。
立即学习
“
Java免费学习笔记（深入）
”；
HTML结构示例
假设我们有以下HTML结构，其中 #hovertrigger1 和 #gallery1 是两个不相关的元素：
JavaScript实现步骤
我们将通过JavaScript获取这两个元素，并为触发元素添加事件监听器。
获取元素引用：
首先，我们需要通过ID获取到触发元素和目标元素的DOM引用。
添加 mouseover 事件监听器：
当鼠标进入 #hovertrigger1 区域时，改变 #gallery1 的亮度。
添加 mouseout 事件监听器：
为了实现交互的完整性，当鼠标离开 #hovertrigger1 区域时，需要将 #gallery1 的亮度恢复到正常状态。
完整JavaScript代码示例
将上述代码片段整合到
代码解释：
document.addEventListener('DOMContentLoaded', ...)：确保在DOM完全加载和解析后才执行JavaScript代码，避免因元素未加载而导致的错误。
if (hoverTrigger && gallery)：这是一个健壮性检查，确保在尝试操作元素之前，这些元素确实存在于DOM中。
gallery.style.filter = 'brightness(0.5)';：直接设置元素的 filter CSS属性。这里我们将其设置为 brightness(0.5)，使元素变暗。
gallery.style.filter = 'brightness(1)';：当鼠标离开时，将 filter 属性重置为 brightness(1)，使元素恢复正常亮度。
增强用户体验：添加过渡效果
直接改变亮度可能会显得生硬。为了提供更平滑的视觉体验，我们可以在CSS中为 #gallery1 的 filter 属性添加过渡效果。
Refore网页转设计
一款加速产品 UI 设计迭代的工具，可以一键将任意网页和交互导入到 Pixso、MasterGo、即时设计、Figma，实现像素级还原。
下载
在
非关联DIV亮度调整
鼠标悬停此处
Logo动画区
Logo区
这是一个图片画廊（ID=13）
const hoverTrigger = document.getElementById('hovertrigger1');
const gallery = document.getElementById('gallery1');hoverTrigger.addEventListener('mouseover', () => {
gallery.style.filter = 'brightness(0.5)'; // 将亮度降低到50%
});hoverTrigger.addEventListener('mouseout', () => {
gallery.style.filter = 'brightness(1)'; // 恢复到原始亮度
});