在前端交互开发中，经常会遇到鼠标悬停某个子元素时，需要同步改变该子元素的父元素样式，或者调整其他兄弟元素显示状态的需求。纯CSS的hover伪类只能作用于当前元素及其后代元素，无法向上影响父元素，也无法横向操作兄弟元素，因此需要借助JavaScript来补全这类交互能力。
核心实现思路
实现这类交互的核心逻辑分为三步：首先给目标子元素绑定鼠标进入和离开的事件监听，然后在事件回调中通过DOM API找到对应的父元素和兄弟元素，最后动态修改这些元素的样式或类名，完成联动效果。
关键DOM操作方法
parentNode：获取当前元素的直接父元素previousElementSibling：获取当前元素的前一个兄弟元素nextElementSibling：获取当前元素的后一个兄弟元素classList.add/remove：操作元素的类名，比直接修改style属性更便于样式维护
完整代码示例
下面是一个列表项的悬停联动示例，当鼠标悬停某个列表项时，该列表项的父容器背景色变化，同时其他兄弟列表项的透明度降低。
<!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>
.list-container {
width: 300px;
padding: 20px;
border: 1px solid #eee;
transition: background-color 0.3s;
}
.list-item {
padding: 12px;
margin: 8px 0;
background-color: #f5f5f5;
border-radius: 4px;
transition: opacity 0.3s;
cursor: pointer;
}
.list-container.active {
background-color: #e8f4ff;
}
.list-item.dim {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="list-container" id="container">
<div class="list-item">列表项1</div>
<div class="list-item">列表项2</div>
<div class="list-item">列表项3</div>
<div class="list-item">列表项4</div>
</div>
<script>
// 获取所有列表项元素
const listItems = document.querySelectorAll('.list-item');
// 获取父容器元素
const container = document.getElementById('container');
// 遍历每个列表项绑定事件
listItems.forEach(item => {
// 鼠标进入事件
item.addEventListener('mouseenter', function() {
// 给父容器添加激活类名
container.classList.add('active');
// 遍历所有列表项，给非当前项添加变暗类名
listItems.forEach(sibling => {
if (sibling !== this) {
sibling.classList.add('dim');
}
});
});
// 鼠标离开事件
item.addEventListener('mouseleave', function() {
// 移除父容器的激活类名
container.classList.remove('active');
// 移除所有列表项的变暗类名
listItems.forEach(sibling => {
sibling.classList.remove('dim');
});
});
});
</script>
</body>
</html>
代码逻辑解析
上述代码中，首先通过querySelectorAll获取所有列表项，给每个列表项绑定mouseenter和mouseleave事件。当鼠标进入某个列表项时，通过container.classList.add('active')给父容器添加激活样式，同时遍历所有列表项，给非当前悬停的项添加dim类名降低透明度。当鼠标离开时，移除对应的类名，恢复初始状态。
注意事项
- 事件绑定尽量使用事件委托优化性能，尤其是列表项数量较多时，可以将事件绑定在父容器上，通过
event.target判断触发元素 - 样式修改优先使用类名切换，而不是直接修改
style属性，这样便于样式的统一维护和后期调整 - 如果需要兼容旧版浏览器，注意
classList的兼容性，可替换为className操作
这类悬停联动交互常见于导航菜单、卡片列表、相册预览等场景，合理运用可以提升页面的交互体验，让操作反馈更加直观。
CSS_hoverJavaScript父元素交互兄弟元素联动DOM操作修改时间：2026-07-01 10:30:16