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 that you have read and understand our privacy policy and code of conduct.

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