Question

所以我试图创建一个网站，如果你点击一个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>

我已经在label标签中尝试了for="redcovertoggle"，但它所做的就是让img停止像标签一样。

Answer 1

要使用css，只能使用:target选择器和图像链接，例如：

＆＃13;

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

＆＃13;

<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>

＆＃13;

用IMG标记事件

1 个答案: