0

СSS. хочу сделать так, чтобы при нажатии на иконку она пропала, но разве есть такой псевдокласс?(я новичок, извиниите за тупой вопрос)

0

2 ответа 2

3

Без дополнительных оберток в HTML - никак.
Можно сделать с помощью невидимого checkbox и селектора :checked

.hide-icon {
  display: none;
}

.hide-icon:checked + img {
  display: none;
}
<label>
  <input class="hide-icon" type="checkbox">
  <img src="https://gyazo.com/8af70de8af94c64bb97836ac22203322.png">
</label>

<label>
  <input class="hide-icon" type="checkbox">
  <img src="https://gyazo.com/ad98053db7e34527c398c2be74f2706b.png">
</label>

<label>
  <input class="hide-icon" type="checkbox">
  <img src="https://gyazo.com/cfe8b956895ec05df18a78466ced1cb4.png">
</label>


Или без этого всего, через JavaScript:

<img class="js-hide" src="https://gyazo.com/8af70de8af94c64bb97836ac22203322.png">
<img class="js-hide" src="https://gyazo.com/ad98053db7e34527c398c2be74f2706b.png">
<img class="js-hide" src="https://gyazo.com/cfe8b956895ec05df18a78466ced1cb4.png">

<script>
  let images = document.querySelectorAll(".js-hide");

  for (let i = 0; i < images.length; i++) {
    images[i].addEventListener("click", hide);
  }

  function hide() {
    this.style.display = "none";
  }
</script>

>> Книги и учебные ресурсы по javascript

2

Развивая идею @OPTIMUS PRIME с чекбоксом, и учитывая что не сказано про тип элемента иконки, вот возможно рабочее решение из одного элемента:

.icon {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 50px;
  height: 50px;
  background: url("https://pics.freeicons.io/uploads/icons/png/3199659271606252959-512.png") no-repeat center center;
  background-size: contain;
  outline: none;
}

.icon:checked {
  display: none;
}
<input type="checkbox" class="icon">

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.