CSS技术问询：实现两个标题悬停时互改颜色效果

嘿，这个交互效果用CSS就能轻松搞定！先提醒你一下，你初始代码里的CSS选择器#frist拼写错了，应该是#first，不然样式不会生效哦。下面给你两种实现方案，你可以根据浏览器兼容性需求来选：

方案一：用CSS :has() 伪类（推荐，现代浏览器支持） #

这个方案不需要调整DOM结构，利用:has()伪类检测某个元素的hover状态，然后给另一个元素设置样式，非常直观：

/* 基础样式：设置默认颜色，加上过渡让颜色变化更平滑 */
#first, #second {
  color: #333;
  transition: color 0.3s ease;
}

/* 当鼠标悬停在第二个标题上时，第一个标题变红 */
body:has(#second:hover) #first {
  color: #ff4500;
}

/* 当鼠标悬停在第一个标题上时，第二个标题变蓝 */
#first:hover ~ #second {
  color: #1e90ff;
}

说明：

• body:has(#second:hover) 意思是“当body里的#second元素处于hover状态时”，然后选中#first元素改变颜色
• #first:hover ~ #second 是利用通用兄弟选择器，选中#first后面的所有#second兄弟元素，当#first hover时改变它的颜色
• transition 属性是可选的，加了之后颜色变化会有渐变效果，体验更好

方案二：调整DOM顺序 + 兄弟选择器（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器（比如IE），可以调整DOM的顺序，再用CSS布局把视觉顺序改回来，然后用传统的兄弟选择器实现：

首先修改HTML结构：

<h1 id="second">Second header</h1>
<h1 id="first">First header</h1>

然后写CSS：

/* 用flex布局把两个标题的视觉顺序反过来 */
body {
  display: flex;
  flex-direction: column-reverse;
}

/* 基础样式 */
#first, #second {
  color: #333;
  transition: color 0.3s ease;
  /* 去掉默认的margin，避免布局混乱 */
  margin: 0.5em 0;
}

/* 悬停视觉上的第一个标题（DOM里的#first）时，视觉上的第二个标题（DOM里的#second）变色 */
#first:hover ~ #second {
  color: #ff4500;
}

/* 悬停视觉上的第二个标题（DOM里的#second）时，视觉上的第一个标题（DOM里的#first）变色 */
#second:hover ~ #first {
  color: #1e90ff;
}

这样不管哪种方案，都能实现你要的“悬停一个标题，另一个标题变色”的效果啦！

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