时间戳

首页 > 解决方案 > 如何将这两个功能合二为一？

javascript - 如何将这两个功能合二为一？

问题描述

我有一个带图像的 div 和一个带文本的 div。当我将鼠标悬停在图像上时，它会改变灰度，而将鼠标悬停在文本上会改变不透明度。如何组合 js 代码，以便将鼠标悬停在图像或文本上，同时更改图像的灰度和文本的不透明度？

      <div class="images">
        <img src="/photographs/FootballTeam.jpg" />
        <div class="image_description">The team. 14/07/17</div>
      </div>

var images = document.querySelectorAll("#photos > .images > img");
for (var i = 0; i < images.length; i++) {
  images[i].style.transitionDuration = "0.1s";
  images[i].addEventListener("mouseenter", function() {
    if (this.style.filter === "grayscale(100%)") {
      this.style.filter = "grayscale(0%)";
    } else {
      this.style.filter = "grayscale(100%)";
    }
  });
}

var images = document.querySelectorAll(
  "#photos > .images > .image_description"
);
for (var i = 0; i < images.length; i++) {
  images[i].style.transitionDuration = "0.1s";
  images[i].addEventListener("mouseenter", function() {
    if (this.style.opacity === "0") {
      this.style.opacity = "1";
    } else {
      this.style.opacity = "0";
    }
  });
}

标签： javascripthtml

解决方案

我建议对您的代码进行以下更改：

var imageContainers = document.querySelectorAll("#photos > .images");
imageContainers.forEach(imageContainer => {
   imageContainer.addEventListener('mouseenter', () => {
      imageContainer.classList.toggle('grayscale')
   });
})

然后，在你的 CSS 中：

  #photos .images > * {
    transition: 0.5s;
  }

  #photos .images > img {
      filter: grayscale(0%);
  }

  #photos .images.grayscale > img {
      filter: grayscale(100%);
  }


  #photos .images > .image_description {
      opacity: 0;
  }


  #photos .images.grayscale > .image_description {
      opacity: 1;
  }

推荐阅读