它可能更新页面内容使用html和CSS没有JavaScript？

Question

可能更新页面内容使用html和css而不使用javascript

我看到这个教程，但我不知道是否可以在没有javascript的情况下点击更新页面

http://codepen.io/ejsado/pen/EaFsy?css-preprocessor=sass

@keyframes hide1 {
	from {
		visibility: hidden;
	}
	to {
		visibility: visible;
	}
}
@keyframes hide2 {
	from {
		visibility: hidden;
	}
	to {
		visibility: visible;
	}
}

@mixin set-animation($name) {
  animation: $name 200ms steps(1);
}
h1, h3, h4, p {
  text-align: center;
}
h4 {
	width: 400px;
	margin: 1rem auto;
}
div {
  width: 140px;
  margin: 0 auto;
}
#click {
  position: absolute;
  left: -20px;
}
#single-click {
  position: absolute;
  cursor: pointer;
  @include set-animation(hide1);
}
#single-click, #double-click {
  user-select: none;
  width: 135px;
  height: 110px;
}
#double-click {
  border: none;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/folders.png");
  background-size: 450px;
  background-position: 301px 0;
}
#click:checked ~ #single-click {
  @include set-animation(hide2);
}
#double-click:focus {
  outline: 0;
}
#click:focus ~ #double-click {
  background-position: 0 0;
}
#double-click:focus {
  background-position: 153px 0;
}
#double-click:focus ~ p {
  opacity: 1;
}
p {
  opacity: 0;
}
footer {
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 13px;
  background: #DDD;
  padding: 5px 10px;
  margin: 5px;
}

<h1>CSS Double Click</h1>
<h3>Double click detection without Javascript</h3>
<div>
  <input type="checkbox" id="click">
  <label id="single-click" for="click"></label>
  <button id="double-click"></button>
  <p>You double clicked!</p>
</div>
<h4>The folder image is a button.</h4>
<h4>There is a transparent label on top of the button.</h4>
<h4>The label is attached to a checkbox.</h4>
<h4>When the label is clicked, it gains focus and the folder is opened and the checkbox is checked (or unchecked).</h4>
<h4>The checkbox triggers an animation which hides the transparent label for 200ms, which allows the button (folder image) to be clicked.</h4>
<h4>If the user is quick enough to click the button, the button is focussed and displays the full folder and shows the success message.</h4>
<footer>
  An original pen by <a href="http://codepen.io/ejsado/">Eric</a>.
</footer>

请帮帮我

Answer 1

您的codepen示例使用复选框hack：

https://css-tricks.com/the-checkbox-hack/

有很多事情可以这样完成，我希望你喜欢进一步研究：D