Наведите курсор на изображение, чтобы добавить эффект, снова наведите курсор, чтобы оно исчезло - PullRequest
Новая
       3

Наведите курсор на изображение, чтобы добавить эффект, снова наведите курсор, чтобы оно исчезло

2 голосов
/ 02 мая 2020

У меня отображается несколько изображений. Во-первых, они все черного цвета, и я хочу добавить эффекты, чтобы при наведении курсора на изображение его шкала серого становилась равной 0 и оставалась равной 0, пока я снова не наведу курсор на это изображение.

Я видел, что несколько человек используют javascript, чтобы добавить класс, но я не уверен, как вернуться к шкале серого на 100% после первого наведения. 

 <div id="photos">
      <div class="images">
        <img src="/photographs/clouds.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/DogPrint.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/euro.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/FireHead.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/wasabi.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/sam.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/roli.jpg" />
      </div>
    </div>

img {
  width: 100%;
  filter: grayscale(100%);
  border-radius: 2px;
  transition: all 0.25s ease-in-out;
}
#photos {
  columns: 5 200px;
  column-gap: 1.5rem;
  width: 90%;
  margin-top: 200px;
  margin-left: 200px;
}

Ответы [ 2 ]

2 голосов
/ 02 мая 2020

Я просто добавил немного Javascript, чтобы заставить его работать, и даже переход.

JSFiddle - https://jsfiddle.net/8850s/oj5rcv8n/

HTML - 

    <div id="photos">
      <div class="images">
        <img src="/photographs/clouds.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/DogPrint.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/euro.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/FireHead.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/wasabi.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/sam.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/roli.jpg" />
                <div>
                Text
                </div>
      </div>
</div>

JS - 

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

    })
}

CSS - 

img {
  width: 100%;
  filter: grayscale(100%);
  border-radius: 2px;
  transition: all 0.25s ease-in-out;
}

#photos {
  columns: 5 200px;
  column-gap: 1.5rem;
  width: 90%;
  margin-top: 200px;
  margin-left: 200px;
}
0 голосов
/ 02 мая 2020

Вы можете прикрепить прослушиватель событий mouseover к каждому элементу изображения.
Когда это событие запускается, вы можете просто добавить или удалить className, используя element.classList.toggle('classname').

Пример Live 

 <body>
    <div id="photos">
      <div class="images">
        <img
          class="grayscale-image"
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/500px-Image_created_with_a_mobile_phone.png"
        />
      </div>
    </div>
  </body>
  <script>
    const imgs = document.getElementsByClassName("grayscale-image");
    for (let i in imgs) {
      const currentImg = imgs[i];
      currentImg.addEventListener("mouseover", e => {
        currentImg.classList.toggle("image-color");
      });
    }
  </script>


img {
  width: 100%;
  filter: grayscale(100%);
  border-radius: 2px;
  transition: all 0.25s ease-in-out;
}
#photos {
  columns: 5 200px;
  column-gap: 1.5rem;
  width: 90%;
  margin-top: 200px;
}
.image-color {
  filter: grayscale(0%);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...