переключать информацию по изображениям при нажатии с помощью css и js - PullRequest
Новая
       19

переключать информацию по изображениям при нажатии с помощью css и js

0 голосов
/ 23 июня 2018

Как сделать так, чтобы изображения в моем портфолио были кликабельными, чтобы отображалась информация о проекте, и кликабельными, чтобы скрыть эту информацию при втором клике? Понравится использовать простой js, а не jquery.

См. Веб-сайт, но не работает, удерживая нажатой кнопку и не переключая: введите описание ссылки здесь

Ответы [ 2 ]

0 голосов
/ 23 июня 2018

Вы также можете достичь желаемого эффекта без JS, чистого CSS. 

.element {
  position: relative;
  height: 300px;
  width: 300px;
  background: red;
}

.pseudo-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.pseudo-checkbox:checked + .description {
  display: initial;
}

.description {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="element">
  <input type="checkbox" class="pseudo-checkbox" />
  <div class="description">
    Description
  </div>
</div>
0 голосов
/ 23 июня 2018

Я немного просмотрел ваш сайт, и это может быть возможным решением вашей проблемы.

Добавьте следующий скрипт в JS: 

var imageElems = document.getElementsByClassName('image-box');

for (var i=0; i<imageElems.length; i++) {
    imageElems[i].addEventListener('click', function() {
        this.querySelector('.overlay').classList.toggle('show');
    });
 }

И добавьте это в CSS: 

.overlay.show {
    opacity: 1;
}

Итак, в основном, что я сделал здесь, я добавил событие click для всех ваших изображений с className: image-box, которое переключает класс с именем show на нажатие.

P.S. Вы должны лучше сформулировать свой вопрос, предоставив примеры кода для вашей проблемы, чтобы люди, находящиеся здесь, могли лучше понять вашу проблему. Единственная причина, по которой я пытался помочь вам, это то, что я вижу, что вы графический дизайнер, пытающийся сделать немного кода, и это было достаточно обнадеживающе! :)

...