css - 点击后隐藏图像的html或css

Question

如何在单击 div 内的任意位置后隐藏图像并使其保持隐藏状态直到页面刷新？

<style>
#containter:active img {display: none}
</style>

<div id="containter">
<img src="image.png">
</div>

这可行，但只要您将鼠标移到 div 之外，图像就会重新出现。我知道它应该这样做，但如何让它保持隐藏？

Answer 1

一种简单的方法是在点击时包装要隐藏的项目<label>并使用类似的规则

:checked + img {
    display: none;
}

http://jsfiddle.net/kGDQq/1/

Answer 2

这是一个不显眼的 JS 示例：

html:

<div id="tempDiv">click me</div>

js：

document.getElementById("tempDiv").onclick = function(e) {
  e.target.style.visibility = 'hidden';
}

和一个jsfiddle

Answer 3

为了在语义上正确，我建议您使用 JavaScript 解决方案，不要尝试使用 CSS/HTML hacks。下面的方法将一个新的单击处理程序附加到所有具有该类的元素.hide-on-click，只需将该类添加到您想要在单击时隐藏的任​​何元素。

jsFiddle

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';
        });
    }
})();

如果您希望图像占用的空间不塌陷，那么您应该使用该visibility属性。

this.style.visibility = 'hidden';