HTML/CSS需求：悬停首行同时触发兄弟元素高亮与图片切换

原代码实现了两个独立交互：

• 鼠标悬停第一行「hover over me」时，第三行背景变红、文字变白
• 鼠标悬停图片时，切换显示另一张图片

现在需要调整为：鼠标悬停第一行时，同时触发第三行高亮和图片切换效果

修改后的CSS代码 #

.sibling-hover,
#parent {
  cursor: pointer;
}

/* 悬停第一行时，高亮对应的兄弟元素 */
.sibling-hover:hover~.sibling-highlight {
  background-color: red;
  color: white;
}

/* 悬停第一行时，切换图片显示 */
.sibling-hover:hover~.sibling-highlight .kid img:first-child {
  opacity: 0;
}

.kid {
  position: relative;
  display: block;
  min-width: 60px;
  height: 60px;
  line-height: 70px;
  text-align: center;
}

.kid img {
  display: block;
  opacity: 1;
  height: auto;
  transition: .6s ease;
  width: 10%;
  position: absolute;
  z-index: 12;
}

.kid img+img {
  display: block;
  opacity: 1;
  position: relative;
  z-index: 10;
}

对应的HTML代码（无需修改） #

<div>
  <div class="sibling-hover">hover over me</div>
  <div>I do nothing</div>
  <div>I do nothing</div>
  <div class="sibling-highlight">I get highlighted</div>
  <div class="sibling-highlight">
    <div class="kid"><img src="https://www.westville.be/media/p4ra1gja/205extgb2boldcam-b6.jpg" /><img src="https://www.westville.be/media/r1gd3rrd/205extgb2boldcam-a3.jpg" /></div>
  </div>
</div>

说明 #

• 新增选择器 .sibling-hover:hover~.sibling-highlight .kid img:first-child，当第一行被hover时，通过兄弟选择器定位到包含图片的.sibling-highlight容器，将上层图片透明度设为0，从而显示下层图片
• 保留原有高亮逻辑，若需要保留图片自身hover切换的效果，可保留原代码中的.kid img:hover样式

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