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

Question

I have a div with image and a div with text. When I hover over image, it changes the grayscale and hovering over text changes opacity. How can I combine the js code so that hovering over image or text with change both grayscale of image and opacity of text?

      <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";
    }
  });
}

Answer 1

I hope you have same no of images and the text corresponding to them here. So, just try the below code and revert back -

var images = document.querySelectorAll("#photos > .images > img");
 var imagesWithDesc = 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.filter === "grayscale(100%)") {
      this.style.filter = "grayscale(0%)";
    } else {
      this.style.filter = "grayscale(100%)";
    }
  });
  imagesWithDesc[i].style.transitionDuration = "0.1s";
  imagesWithDesc[i].addEventListener("mouseenter", function () {
    if (this.style.opacity === "0") {
      this.style.opacity = "1";
    } else {
      this.style.opacity = "0";
    }
  });
}

Answer 2

Here is my answer:

//Get all images containers
var images = document.querySelectorAll("#photos > .images");

//Loop every container
for (var i = 0; i < images.length; i++) {
    //set variables for code readability
    let container = images[i];
    let description = self.querySelectorAll(".image_description")[0];

    //set transition durations
    container.style.transitionDuration = "1s";
    description.style.transitionDuration = "1s";

    //add mouse events
    container.addEventListener("mouseenter", function() {
        container.style.filter = "grayscale(100%)";
        description.style.opacity = "0";
    });
    container.addEventListener("mouseleave", function() {
        container.style.filter = "grayscale(0%)";
        description.style.opacity = "1";
    });
}

Answer 3

I suggest following changes to your code:

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

And then, in your 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;
  }

Answer 4

This would be better to make using CSS only. If you need, you can also attach hover event listener.

 .images { position: relative; width: 500px; height: 300px; }.images img { width: 100%; height: 100%; /* Your properties */ transition: .25s; /*(.1s is too fast)*/ }.images.image_description { /* Get it to place */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; line-height: 300px; /* Some style */ color: white; cursor: pointer; font-family: sans-serif; font-size: 28px; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0px 0px 5px black; /* Your properties */ opacity: 0; transition: .25s; } /* Image hover event */.images:hover img { filter: grayscale(1); } /* Description hover event */.images:hover.image_description { opacity: 1; }

 <div class="images"> <img src="https://natgeo.imgix.net/factsheets/thumbnails/01-balance-of-nature.adapt.jpg"/> <div class="image_description">the nature</div> </div> I'm not owner of the image.