如何用JavaScript实现:hover触发时联动修改多元素CSS样式？

你原来的JS代码为啥没用？ #

• 用window.getComputedStyle获取:hover样式根本行不通：这个方法只能读取元素的静态计算样式，没法实时监听鼠标悬停状态的变化，而且获取伪类样式的方式在实际场景基本不生效。
• 条件判断全错：if (outlineOneHover.style.background = blue)里用了赋值运算符=而非比较运算符===，还把blue写成了无引号的未定义变量，属于语法和逻辑双重错误。
• 缺少事件监听：代码只在页面加载时执行一次，完全不会响应鼠标的悬停/离开动作，自然触发不了颜色切换。

两种实现方法 #

方法一：纯CSS（简单高效，适合固定结构） #

如果盒子是固定相邻结构，用CSS兄弟选择器就能实现需求，无需JavaScript：

<div class='parent'>
  <div class="outlineOne"></div>
  <div class="outlineTwo"></div>
</div>

body {
  background: #2F2F2F;
}

.parent {
  display: inline-block; /* 避免父元素占满整行，hover范围过宽 */
}

.outlineOne,
.outlineTwo {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 20px 20px;
  transition: background 0.2s; /* 可选：添加过渡动画让切换更丝滑 */
}

/* 初始颜色 */
.outlineOne { background: red; }
.outlineTwo { background: blue; }

/* 悬停第一个盒子：自身变蓝，第二个变红 */
.outlineOne:hover {
  background: blue;
}
.outlineOne:hover + .outlineTwo {
  background: red;
}

/* 悬停第二个盒子：自身变红，第一个变蓝 */
.outlineTwo:hover {
  background: red;
}
/* 利用父元素hover状态配合类选择器，实现对前面兄弟元素的样式控制 */
.parent:has(.outlineTwo:hover) .outlineOne {
  background: blue;
}

方法二：JavaScript（灵活无结构限制） #

通过监听鼠标mouseenter和mouseleave事件，直接控制两个盒子的颜色切换，不受结构限制：

<div class='parent'>
  <div class="outlineOne"></div>
  <div class="outlineTwo"></div>
</div>

body {
  background: #2F2F2F;
}

.outlineOne,
.outlineTwo {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 20px 20px;
  transition: background 0.2s; /* 可选动画 */
}

/* 初始颜色 */
.outlineOne { background: red; }
.outlineTwo { background: blue; }

const box1 = document.querySelector('.outlineOne');
const box2 = document.querySelector('.outlineTwo');

// 鼠标进入第一个盒子
box1.addEventListener('mouseenter', () => {
  box1.style.backgroundColor = 'blue';
  box2.style.backgroundColor = 'red';
});
// 鼠标离开第一个盒子，恢复初始颜色
box1.addEventListener('mouseleave', () => {
  box1.style.backgroundColor = 'red';
  box2.style.backgroundColor = 'blue';
});

// 鼠标进入第二个盒子
box2.addEventListener('mouseenter', () => {
  box2.style.backgroundColor = 'red';
  box1.style.backgroundColor = 'blue';
});
// 鼠标离开第二个盒子，恢复初始颜色
box2.addEventListener('mouseleave', () => {
  box2.style.backgroundColor = 'blue';
  box1.style.backgroundColor = 'red';
});

补充说明 #

• 纯CSS方案中:has()选择器需要浏览器版本支持（现代浏览器均已支持），如果要兼容旧版浏览器，优先选择JS方案。
• 过渡动画可以根据需求添加或移除，不影响核心功能。

内容的提问来源于stack exchange，提问作者CGCG