-3
其可能的更新页面内容使用HTML和CSS无JavaScript的其可能更新一个页面内容使用HTML和CSS没有JavaScript？
我看到这个教程，但我不知道，如果是点击可能的更新页面，而JavaScript的
http://codepen.io/ejsado/pen/EaFsy?css-preprocessor=sass
@keyframes hide1 {
\t from {
\t \t visibility: hidden;
\t }
\t to {
\t \t visibility: visible;
\t }
}
@keyframes hide2 {
\t from {
\t \t visibility: hidden;
\t }
\t to {
\t \t visibility: visible;
\t }
}
@mixin set-animation($name) {
animation: $name 200ms steps(1);
}
h1, h3, h4, p {
text-align: center;
}
h4 {
\t width: 400px;
\t 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>请帮帮我
你需要停下[如果事情问是可能的]（http://stackoverflow.com/users/7834674/alberto），并开始做你自己的研究。 –