How do I make an image hidden after clicking anywhere inside a div and make it stay hidden until page refresh?
<style>
#containter:active img {display: none}
</style>
<div id="containter">
<img src="image.png">
</div>
This works but as soon as you move the mouse outside of the div, the image reappears. I know it supposed to do that, but how to make it remain hidden?
A simple way of doing this is to wrap the item you want to hide on click in <label> and use a rule like
:checked + img {
display: none;
}
Here's an unobtrusive example for JS:
html:
<div id="tempDiv">click me</div>
js:
document.getElementById("tempDiv").onclick = function(e) {
e.target.style.visibility = 'hidden';
}
In order to be semantically correct I suggest you use a JavaScript solution and don't try to do it with CSS/HTML hacks. The below method attaches a new click handler to all elements with the class .hide-on-click, simply add the class to any element you want to hide on click.
HTML
<div class="hide-on-click">Test 1</div>
<div class="hide-on-click">Test 2</div>
<div class="hide-on-click">Test 3</div>
<div class="hide-on-click">Test 4</div>
JS
(function () {
var elements = document.getElementsByClassName('hide-on-click');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function () {
this.style.display = 'none';
});
}
})();
If you want the the space that the image took up not to collapse then you should use the visibility property.
this.style.visibility = 'hidden';
:activeand:focuspseudo-classes available in css. If you want something else you can use an inline (or unobtrusive) function call such as<div onclick="func()">and set it via javascript.onclick="img.style.visibility='hidden'"<div id="tempDiv" onclick="document.getElementById('tempDiv').style.visibility='hidden';">click me</div>would work, but this is just an example, and not the way it should be done.