Javascript 文本悬停时如何更改图片的属性？

当某些文本悬停时，我想对我网站的一些图片进行更改。具体地说，当h6 inside section，inside a parent row class悬停时，我希望

a

，inside section，inside parent with row class中的图像变灰

我在其他帖子中读到，你可能会以不同的方式影响兄弟姐妹和父母，我尝试了建议的方法，但没有一种有效（可能是因为我不完全了解如何做到这一点）

下面是一些伪代码，解释了我要做的事情。当然，它不起作用，因为这样的筑巢是不可能的

.row>section>h6:悬停{
.行>节>a>img{
滤镜：灰度（100%）；
}
}

我想问一下，我正在努力做的事情是否可能，如果可能，如何做？也可以接受使用JavaScript的解决方案，但如果可能，最好只使用CSS

编辑：这里是一个快速的提琴：

---

我希望当我悬停字段1和字段2时，这两张图片都是灰色的。

这不是正确的语法。如果H6和一个标签在区段标签内，则如下所示：

.row > section > h6:hover + a > img { filter: grayscale(100%); }

---

由于标记是H6标记的下一个同级标记，因此必须使用选择器调用它。

这不是正确的语法。如果H6和一个标签在区段标签内，则如下所示：

.row > section > h6:hover + a > img { filter: grayscale(100%); }

---

由于标记是H6标记的下一个同级标记，因此必须使用选择器调用它。

除非：hover元素位于修改的元素之前，否则无法执行此操作

如果您使用CSS将文本定位在图像下方，则可以使用纯CSS实现，但我不建议这样做。您也可以使用javascript来实现这一点

请参阅以下答案：

我附上代码，告诉你我的意思

.row>section>h6:hover+a>img{
滤镜：灰度（100%）；
}

字段1
字段2

除非：hover元素位于修改的元素之前，否则无法执行此操作

如果您使用CSS将文本定位在图像下方，则可以使用纯CSS实现，但我不建议这样做。您也可以使用javascript来实现这一点

请参阅以下答案：

我附上代码，告诉你我的意思

.row>section>h6:hover+a>img{
滤镜：灰度（100%）；
}

字段1
字段2

对于纯CSS解决方案，可以通过切换html中

h6

和

a

的位置，并使用

display:flex将它们可视化地放回原位，从而为每个图像执行
；弯曲方向：行反向

这样你的代码就可以工作了

section {
  display: flex;
  flex-direction: column-reverse;
}

.row > section > h6:hover + a > img { 
  filter: grayscale(100%); 
}


.row{
/*只是把它们排成一行*/
显示器：flex；
}
h6{
字体大小：16px；
}
部分{
显示器：flex；
弯曲方向：柱反向；
}
.行>节>h6：悬停+a>img{
滤镜：灰度（100%）；
}

字段1
字段2
对于纯CSS解决方案，可以通过切换html中
h6
和
a
的位置，并使用
display:flex将它们可视化地放回原位，从而为每个图像执行
；弯曲方向：行反向

这样你的代码就可以工作了

section {
  display: flex;
  flex-direction: column-reverse;
}

.row > section > h6:hover + a > img { 
  filter: grayscale(100%); 
}


.row{
/*只是把它们排成一行*/
显示器：flex；
}
h6{
字体大小：16px；
}
部分{
显示器：flex；
弯曲方向：柱反向；
}
.行>节>h6：悬停+a>img{
滤镜：灰度（100%）；
}

字段1
字段2
你可以发送html代码吗？我添加了一个提琴来可视化我想做的事情。你可以发送html代码吗？我添加了一个提琴来可视化我想做的事情。我认为这不起作用。请检查下面的fiddle（）并告诉我是否做错了。@firsttimeoncomputer您正在使用两个节标记。将所有内容放在一个节标记中。H6和A不是兄弟姐妹；这就是它不起作用的原因我认为它不起作用。请检查下面的fiddle（）并告诉我是否做错了。@firsttimeoncomputer您正在使用两个节标记。将所有内容放在一个节标记中。H6和A不是兄弟姐妹；这就是它不起作用的原因