javascript - 我需要在 html 中使用 javascript 使图像变暗

Question

CSS

.image-darken {
  transition: 1s;
  filter: brightness (10%);
}

JavaScript

const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');

portfolioItems.forEach(portfolioItem => {
  portfolioItem.addEventListener('mouseover', () => {
    console.log(portfolioItem.childNodes[1].classList);
    portfolioItem.childNodes[1].classList.add('image-darken');
  });
});

HTML

<div class="portfolio-item-wrapper">
  <div class="portfolio-img-background"
       style="background-image:url(images/portfolio1.jpg"></div>

  <div class="img-text-wrapper">
    <div class="logo-wrapper">
      <img src="images/quip.png">
    </div>
    <div class="subtitle">
      I built the Quip Ecommerce platform, named a Top 25 Invention by Time
      Magazine in 2016.
    </div>
  </div>
</div>

我想使用javascript来制作它，这样当我将光标放在图像上时，它会在一秒钟内变暗。当我的光标离开时，它会在一秒钟内变亮。我有很多 portfolio-item-wrapper 元素。我想使用 javascript，因为我希望这是我对 javascript 的介绍。我正在观看 YouTube 上的教程。

这是教程 video 。 javascript 部分大约在 1:14:00 出现。

这是网站目前的样子:

请帮助我，帮我简化一下，我刚刚开始学习编码。

谢谢!

Answer 1

您的目标通常无需任何 JavaScript，只需使用 :hover CSS pseudo-class 即可实现。 。采用非 JavaScript“纯 CSS”方法通常可以实现更简单的解决方案，从长远来看更易于维护。

就您而言，可以通过删除 JavaScript 并对 CSS 应用以下更改来实现纯 CSS 方法:

/*
Not needed
.image-darken {
  transition: 1s;
  filter: brightness (10%);
}
*/

.portfolio-item-wrapper {
  /* Add transition rule to filter property of the item wrapper */
  transition: filter 1s;
}

/* Add styling that applies when the user "hovers" the element. The 
    "hover" will cause the filtering to be applied to this element */
.portfolio-item-wrapper:hover {
  filter: brightness(10%);
}

/* Added for snippet - not needed in your code */
.portfolio-img-background {
  min-height:5rem;
}

<div class="portfolio-item-wrapper">
  <div class="portfolio-img-background"
       style="background-image:url(https://via.placeholder.com/150)"></div>
  <div class="img-text-wrapper">
    <div class="subtitle">
      I built the Quip Ecommerce platform, named a Top 25 Invention by Time
      Magazine in 2016.
    </div>
  </div>
</div>

如果您确实想采用脚本化方法来实现此目的，那么您可以执行以下操作:

document.querySelectorAll('.portfolio-item-wrapper')
.forEach(item => {

  /* Get background element of this item */
  const background = item.querySelector('.portfolio-img-background')

  /* Add image-darken class to background element on hover event */
  item.addEventListener('mouseover', () => {
    background.classList.add('image-darken');
  });
  
  /* Add image-darken class to background element on hover end */
  item.addEventListener('mouseout', () => {
    background.classList.remove('image-darken');
  });
});

/* Apply transition to the background element of portfolio item */
.portfolio-item-wrapper .portfolio-img-background {
  transition: filter 1s;
}

/* Define image darkening */
.image-darken {
  filter: brightness(10%);
}

/* Added for snippet - not needed in your code */
.portfolio-img-background {
  min-height:5rem;
}

<div class="portfolio-item-wrapper">
  <div class="portfolio-img-background"
       style="background-image:url(https://via.placeholder.com/150)"></div>
  <div class="img-text-wrapper">
    <div class="subtitle">
      I built the Quip Ecommerce platform, named a Top 25 Invention by Time
      Magazine in 2016.
    </div>
  </div>
</div>

希望有帮助!