如何实现悬停指定文本时将对应网页图片转为灰度？

当然可以实现这个需求！我先给你优先推荐CSS方案（更简洁高效），再提供兼容旧浏览器的JavaScript方案～

CSS 方案（推荐） #

你之前的伪代码无效是因为原生CSS不支持嵌套选择器触发（那是Sass这类预处理器的语法），而且要实现跨元素的样式触发，需要用到CSS的:has()选择器——它能让父元素根据子元素的状态来控制其他元素的样式。

代码实现 #

假设你的HTML结构是这样的：

<div class="row">
  <section>
    <h6>Field1</h6>
    <a href="#"><img src="your-image-path" alt="Image 1"></a>
  </section>
  <section>
    <h6>Field2</h6>
    <a href="#"><img src="your-image-path" alt="Image 2"></a>
  </section>
</div>

对应的CSS代码：

/* 核心：当.row下任意section里的h6被hover时，所有section内的图片变灰度 */
.row:has(> section > h6:hover) > section > a > img {
  filter: grayscale(100%);
}

/* 可选：添加过渡动画，让灰度切换更平滑 */
.row > section > a > img {
  transition: filter 0.3s ease;
}

兼容性说明 #

:has()选择器目前已经被现代主流浏览器支持（Chrome 105+、Firefox 121+、Safari 15.4+），如果你的目标用户都在使用新版浏览器，这个方案是最优解。

如果你只需要让当前section内的图片变灰度（而不是所有图片），可以用兄弟选择器替代：

/* 仅影响当前section内的图片 */
.row > section > h6:hover ~ a > img {
  filter: grayscale(100%);
}

~是通用兄弟选择器，会选中h6后面所有同层级的a元素，不管中间有没有其他元素。

JavaScript 方案（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器，用JavaScript来监听鼠标事件即可：

代码实现 #

// 获取所有需要监听hover的h6元素
const hoverHeadings = document.querySelectorAll('.row > section > h6');
// 获取所有需要修改的图片元素
const targetImages = document.querySelectorAll('.row > section > a > img');

// 给图片添加过渡效果（也可以写在CSS里）
targetImages.forEach(img => {
  img.style.transition = 'filter 0.3s ease';
});

// 鼠标进入h6时，给所有图片添加灰度
function addGrayscale() {
  targetImages.forEach(img => {
    img.style.filter = 'grayscale(100%)';
  });
}

// 鼠标离开h6时，移除灰度效果
function removeGrayscale() {
  targetImages.forEach(img => {
    img.style.filter = '';
  });
}

// 给每个h6绑定事件监听
hoverHeadings.forEach(h6 => {
  h6.addEventListener('mouseenter', addGrayscale);
  h6.addEventListener('mouseleave', removeGrayscale);
});

这个方案兼容性更好，能适配几乎所有浏览器。

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