利用 JavaScript 实现非关联元素间的交互：鼠标悬停改变 Div 亮度-html教程-PHP中文网

利用 JavaScript 实现非关联元素间的交互：鼠标悬停改变 Div 亮度

聖光之護

发布： 2025-10-18 11:43:11

原创

490人浏览过

利用 JavaScript 实现非关联元素间的交互：鼠标悬停改变 Div 亮度

本教程详细阐述如何通过 javascript 实现对非关联 html 元素的动态视觉控制。当鼠标悬停在一个指定触发器 `div` 上时，另一个独立的 `div` 的亮度将随之改变。文章将介绍利用 `mouseover` 事件监听器和 css `filter` 属性来创建交互式用户体验，并提供详细的代码示例和注意事项，以帮助开发者实现复杂的页面动态效果。

在现代网页开发中，实现元素间的交互效果是提升用户体验的关键。然而，当需要交互的元素之间不存在直接的父子或兄弟关系时，纯 CSS 的 :hover 伪类往往无法满足需求。此时，JavaScript 凭借其强大的事件处理能力和 DOM 操作功能，成为解决此类问题的理想选择。本文将指导您如何利用 JavaScript，在鼠标悬停于一个 div 元素上时，动态地改变另一个独立 div 元素的亮度。

核心原理：JavaScript 事件监听与 CSS 滤镜

实现这一效果主要依赖于两个核心技术：

JavaScript 事件监听器 (addEventListener)：用于捕获用户在特定元素上的交互行为，例如鼠标悬停（mouseover）和鼠标移开（mouseout）。
CSS filter 属性：该属性允许对元素应用图形效果，如模糊、亮度调整、对比度等。其中，brightness() 函数用于调整元素的亮度。

当鼠标进入触发器元素时，JavaScript 会监听 mouseover 事件，并执行一个函数来修改目标元素的 filter 样式，将其亮度降低。当鼠标离开时，则监听 mouseout 事件，将亮度恢复到初始状态。

HTML 结构示例

假设我们有两个完全独立的 div 元素：一个作为触发器，另一个作为目标。它们之间没有层级关系。

立即学习“Java免费学习笔记（深入）”；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标悬停改变亮度</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .container {
            display: flex;
            gap: 50px; /* 增加一些间距 */
            margin-bottom: 30px;
        }
        #hovertrigger1 {
            width: 150px;
            height: 150px;
            background-color: #4CAF50;
            border: 2px solid #388E3C;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease; /* 触发器自身也添加一个过渡 */
        }
        #hovertrigger1:hover {
            background-color: #66BB6A;
        }
        #gallery1 {
            width: 300px;
            height: 200px;
            background-image: url('https://via.placeholder.com/300x200/ADD8E6/000000?text=目标图片'); /* 示例图片 */
            background-size: cover;
            background-position: center;
            border: 2px solid #2196F3;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: filter 0.3s ease; /* 添加过渡效果，使亮度变化平滑 */
        }
        /* 避免示例HTML中冗余的div */
        .logoanim, .logo {
            display: none; /* 隐藏不相关的div，简化示例 */
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="hovertrigger" id="hovertrigger1">鼠标悬停此处</div>
    </div>

    <div class="wp-block-gmedia-gallery gmedia-shortcode" id="gallery1"></div>

</body>
</html>

登录后复制

在这个 HTML 结构中：

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

查看详情

#hovertrigger1 是我们的触发器元素。
#gallery1 是我们的目标元素，它的亮度将根据鼠标在 #hovertrigger1 上的行为而改变。
它们位于不同的父元素下，彼此独立。

JavaScript 实现步骤

以下是实现这一功能的 JavaScript 代码：

document.addEventListener('DOMContentLoaded', () => {
    // 1. 获取触发器元素和目标元素
    const hoverTrigger = document.getElementById('hovertrigger1');
    const targetGallery = document.getElementById('gallery1');

    // 确保元素存在
    if (hoverTrigger && targetGallery) {
        // 2. 为触发器元素添加 'mouseover' 事件监听器
        hoverTrigger.addEventListener('mouseover', () => {
            // 当鼠标悬停在触发器上时，降低目标元素的亮度
            targetGallery.style.filter = 'brightness(0.5)'; // 0.5 表示 50% 的亮度
        });

        // 3. 为触发器元素添加 'mouseout' 事件监听器，以恢复亮度
        hoverTrigger.addEventListener('mouseout', () => {
            // 当鼠标移开触发器时，恢复目标元素的原始亮度
            targetGallery.style.filter = 'brightness(1)'; // 1 或 'none' 表示原始亮度
        });
    } else {
        console.error('未能找到ID为 "hovertrigger1" 或 "gallery1" 的元素。');
    }
});

登录后复制

代码解析：

document.addEventListener('DOMContentLoaded', ...): 这是一个最佳实践，确保在 DOM 完全加载和解析之后才执行 JavaScript 代码，防止在元素尚未存在时尝试获取它们。
document.getElementById('hovertrigger1') 和 document.getElementById('gallery1'): 通过 ID 获取对应的 HTML 元素引用。
hoverTrigger.addEventListener('mouseover', () => { ... }): 当鼠标指针移到 hoverTrigger 元素上时，括号内的匿名函数将被执行。
- 在函数内部，targetGallery.style.filter = 'brightness(0.5)' 将 targetGallery 的 CSS filter 属性设置为 brightness(0.5)。brightness(0.5) 意味着将元素的亮度降低到其原始亮度的 50%。
hoverTrigger.addEventListener('mouseout', () => { ... }): 当鼠标指针从 hoverTrigger 元素上移开时，该匿名函数将被执行。
- targetGallery.style.filter = 'brightness(1)' 将 targetGallery 的亮度恢复到原始值（100%）。您也可以使用 targetGallery.style.filter = 'none' 来移除所有滤镜效果。

整合与运行

将上述 HTML 和 JavaScript 代码分别放入 .html 文件和 <script> 标签（或外部 .js 文件并引用）中，即可观察到效果。为了更好的用户体验，可以在 CSS 中为 #gallery1 添加 transition 属性，使亮度的变化更加平滑。

<!-- ... (HTML head 部分) ... -->
<style>
    /* ... (之前的 CSS 样式) ... */
    #gallery1 {
        /* ... (之前的 #gallery1 样式) ... */
        transition: filter 0.3s ease; /* 添加过渡效果 */
    }
</style>
<!-- ... (HTML body 部分) ... -->
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const hoverTrigger = document.getElementById('hovertrigger1');
        const targetGallery = document.getElementById('gallery1');

        if (hoverTrigger && targetGallery) {
            hoverTrigger.addEventListener('mouseover', () => {
                targetGallery.style.filter = 'brightness(0.5)';
            });

            hoverTrigger.addEventListener('mouseout', () => {
                targetGallery.style.filter = 'brightness(1)';
            });
        } else {
            console.error('未能找到ID为 "hovertrigger1" 或 "gallery1" 的元素。');
        }
    });
</script>
</body>
</html>

登录后复制

拓展与注意事项

其他滤镜效果：filter 属性支持多种函数，如 contrast() (对比度), grayscale() (灰度), sepia() (褐色), blur() (模糊), saturate() (饱和度) 等。您可以根据需求尝试不同的组合。
性能考虑：直接修改 style 属性是有效的，但如果涉及到复杂的动画或频繁的 DOM 操作，可以考虑使用 CSS 类来管理状态，例如：
```
// CSS
.darken {
    filter: brightness(0.5);
}
// JavaScript
hoverTrigger.addEventListener('mouseover', () => {
    targetGallery.classList.add('darken');
});
hoverTrigger.addEventListener('mouseout', () => {
    targetGallery.classList.remove('darken');
});
```
登录后复制
这种方式将样式与行为分离，更易于维护，并且通常能更好地利用浏览器的 CSS 优化。
事件委托：如果页面上有大量类似的触发器和目标元素，可以考虑使用事件委托，将事件监听器添加到它们的共同父元素上，减少内存占用和提高效率。
兼容性：filter 属性在现代浏览器中得到了广泛支持。对于旧版浏览器，可能需要添加 -webkit- 等前缀，但现在通常已不再需要。
无障碍性：在设计视觉效果时，请考虑对视力障碍用户的无障碍性。确保重要的信息不会仅通过颜色或亮度变化来传达。

总结

通过本教程，我们学习了如何利用 JavaScript 的事件监听机制和 CSS 的 filter 属性，实现鼠标悬停在非关联元素上时，动态改变另一个元素的亮度。这种技术不仅限于亮度调整，还可以扩展到各种视觉效果，为开发者提供了强大的工具来创建丰富、交互性强的网页体验。掌握这一方法，能够有效解决纯 CSS 难以处理的复杂 UI 交互场景。

以上就是利用 JavaScript 实现非关联元素间的交互：鼠标悬停改变 Div 亮度的详细内容，更多请关注php中文网其它相关文章！