СSS. хочу сделать так, чтобы при нажатии на иконку она пропала, но разве есть такой псевдокласс?(я новичок, извиниите за тупой вопрос)
2 ответа
Без дополнительных оберток в 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>
Развивая идею @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">