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

and a jsfiddle for it

Answer 3

为了在语义上正确，我建议您使用JavaScript解决方案，不要尝试使用CSS / HTML黑客。下面的方法将新的单击处理程序附加到具有类.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';

单击后html或css隐藏图像

3 个答案: