javascript - 如何在文本悬停时更改图片的属性？

Question

当某些文本悬停时，我想更改我网站的一些图片。具体来说，当 h6 inside section, inside a parent row class 悬停时，我希望 a，inside section，inside parent with row class 中的图像进行灰度化。

我在其他帖子中读到，您可能会以不同的方式影响 sibling 和 parent ，我尝试了建议的方法，但没有一个奏效(这可能是因为我没有完全理解它是如何完成的)。

这是一些伪代码，解释了我想做什么。当然，这是行不通的，因为这样的嵌套是不可能的。

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

我想问一下我想做的事情是否可行，如果可行，怎么做？也可以接受使用 JavaScript 的解决方案，但最好尽可能只使用 CSS。

编辑:这是一个快速的 fiddle :https://jsfiddle.net/pjo4yxLk/2/

我希望当我悬停 Field1 和 Field 2 时，两张图片都变成灰度。

Answer 1

对于纯 CSS 解决方案，可以通过在 html 中切换 h6 和 a 的位置来完成每个图像并将通过 display: flex; 可以让它们回到原位flex-direction: 行反转;.
这样你的代码就可以工作了。

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

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

.row {
 /* just to align them in a row */
  display: flex;
}

h6 {
  font-size: 16px;
}

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

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

<div class="row container">
  <section>
    <h6>
      Field 1
    </h6>
    <a href="https://www.google.com/">
      <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" style="width: 150px;">
    </a>
  </section>
  <section>
    <h6>
      Field 2
    </h6>
    <a href="https://www.google.com/">
      <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" style="width: 150px;">
    </a>
  </section>
</div>

但是，如果您希望在一个 h6 悬停时两个图像都变成灰度，那么我认为您将需要 JS。

CSS

.row {
  display: flex;
}

.grayScaler {
  filter: grayscale(100%); 
}

JS

var theH6s = document.querySelectorAll(".row > section > h6");
var theImages = document.querySelectorAll("section > a > img");

function grayScaler () {
  for(let i = 0; i < theImages.length ; i++) {
        theImages[i].classList.toggle("grayScaler");
  }
}

for(let i = 0; i < theH6s.length ; i++) {
    theH6s[i].addEventListener("mouseenter",grayScaler);
  theH6s[i].addEventListener("mouseleave",grayScaler);
}

var theH6s = document.querySelectorAll(".row > section > h6");
var theImages = document.querySelectorAll("section > a > img");

function grayScaler() {
  for (let i = 0; i < theImages.length; i++) {
    theImages[i].classList.toggle("grayScaler");
  }
}

for (let i = 0; i < theH6s.length; i++) {
  theH6s[i].addEventListener("mouseenter", grayScaler);
  theH6s[i].addEventListener("mouseleave", grayScaler);
}

h6 {
  font-size: 20px;
}

.row {
  display: flex;
}

.grayScaler {
  filter: grayscale(100%);
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="row container">
  <section>
    <a href="https://www.google.com/">
      <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" style="width: 150px;">
    </a>
    <h6>
      Field 1
    </h6>
  </section>
  <section>

    <a href="https://www.google.com/">
      <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" style="width: 150px;">
    </a>
    <h6>
      Field 2
    </h6>
  </section>
</div>