带有 IMG 的事件标签答案

【问题标题】：Label with IMG for event带有 IMG 的事件标签
【发布时间】：2018-03-05 11:38:29
【问题描述】：

所以我试图创建一个网站，如果你点击一个img，一个红色块，100% 宽度，100% 高度，覆盖所有内容。

body {
  margin: 0;
  background-color: white;
}

h1 {
  font-size: 50px;
  text-align: center;
  font-family: Raleway;
  color: red;
  margin-top: 5%;
}

img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.redcover {
  margin-top: -10%;
  position: absolute;
  width: 100%;
  height: 110%;
  background: red;
  margin-left: -90%;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
}

#redcovertoggle:checked~.redcover {
  margin-left: 0%;
}

<div class="redcover"></div>
<h1>HERZENSSACHE</h1>
<label>
		<input type="checkbox" for="redcovertoggle">
		<img src="https://image.ibb.co/d2aN15/heart2.png" alt="redcovertoggleheart">
		</label>

我已经在标签标签中尝试了for="redcovertoggle"，但它所做的只是让img 不再像标签一样。

【问题讨论】：

标签： html css image animation label

【解决方案1】：

要仅使用 css 执行此操作，您可以使用 :target 选择器和图像链接，例如：

body {
            margin: 0;
            background-color: white;
        }
        h1 {
            font-size: 50px;
            text-align: center;
            font-family: Raleway;
            color: red;
            margin-top: 5%;
        }
        img {
            margin-left: auto;
            margin-right: auto;
            display: block;
        } 
        #redcover {
            margin-top: -10%;
            position: absolute;
            width: 100vw;
            height: 100vh;
            background: red;
            left: -100vw;
            z-index: 999;
            transition: left 1s;               
        }
        #redcover:target { left:0; }

<body>
    <div id="redcover"></div>
    <h1>HERZENSSACHE</h1>
    <label>
    <a href="#redcover"><img src="https://image.ibb.co/d2aN15/heart2.png" alt="redcovertoggleheart"></a>
    </label>
</body>

【讨论】：