如何实现鼠标悬停图片时下方文本变色（HTML/CSS/JS）

需求 #

• 鼠标悬停图片容器时，下方第一个文本（test 1）变色
• 鼠标悬停该文本自身时，文本也变色

修改方案 #

1. 调整HTML结构

给需要变色的pc-info元素添加专属类名pc-name，方便CSS精准定位：

<div class="item">
  <div class="container_pictures">
    <img src="Pc pics/Purple1.png" class="Pc-pics">
  </div>

  <div class="container_pc-info">
    <div class="pc-info pc-name">
      test 1 <!-- 仅该文本需要变色 -->
    </div>

    <div class="pc-info">
      test 2
    </div>

    <div class="pc-info">
      test 3
    </div>
  </div>
</div>

2. 更新CSS规则

添加两个关键规则，分别实现文本自身悬停变色、图片悬停联动文本变色：

/* 文本自身悬停时变色 */
.pc-name:hover {
  color: aqua; /* 可替换为你需要的颜色或变量 */
}

/* 图片容器悬停时，联动下方的pc-name文本变色 */
.container_pictures:hover ~ .container_pc-info .pc-name {
  color: aqua; /* 可替换为你需要的颜色或变量 */
}

原代码问题说明 #

你之前尝试的.pc-name.container-pictures:hover写法错误，该选择器表示同时拥有pc-name和container-pictures类的元素悬停时的样式，而非当container-pictures悬停时影响pc-name元素。我们需要用**通用兄弟选择器~**关联同级的图片容器和文本容器，再定位到目标文本元素。

完整补充后的CSS代码 #

.item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  width: calc(15% + 60px);
  height: 100%;
  margin-top: 4%;
}

.container_pc-info {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
  height: 12vw;
  width: 100%;
  margin-top: 8%;
  background: black;
}

.pc-info {
  display: flex;
  flex-direction: column;
  background-color: var(--color-background-header); 
  font-size: 1vw;
  font-family: "priori-sans", sans-serif;
  color: white;
}

/* 新增：文本自身悬停变色 */
.pc-name:hover {
  color: aqua;
}

/* 新增：图片悬停联动文本变色 */
.container_pictures:hover ~ .container_pc-info .pc-name {
  color: aqua;
}

.container_pictures {
  height: 100%;
  width: 100%;
  padding: 1.6em;
  border: 3px solid var(--color-border-items);
  background-color: var(--color-test-background);
  transition: all 0.3s ease;
}

.container_pictures:hover {
  padding: 0.8em;
  background-color: var(--color-border-header-test);
  border-bottom: 3px solid var(--color-border-header-test);
}

.Pc-pics {
  height: 100%;
  width: 100%;
}

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