как сделать так, чтобы пропала иконка при нажатии?

Question

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

Answer 1

Без дополнительных оберток в 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

Answer 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">

БЛОГ НА HUSL

как сделать так, чтобы пропала иконка при нажатии?

Ответы (2 шт):