CSS / HTML使用单选按钮激活超链接

Question

构建一个使用多个单选按钮的网站，这些按钮控制在屏幕上和屏幕上滑动的多个内容div。希望按钮也激活一个新的html加载到我用作背景屏幕的iframe中。

原因是我在iframe中播放视频，并希望在屏幕上显示某些内容时将其替换为简单的背景html doc。我可以使单选按钮的标签成为超链接，但这需要标签上的2次点击1和按钮上的1次。

CSS部分

#iframe_Back   {
position:fixed;
top: 0;
left: 0;
height:100%;
width:100%;
z-index:-1;
}

html,body {
height:100%;
width:100%;
overflow:hidden;
}

input {
position:absolute;
left:-9999px;
top:-9999px;
}

label {
cursor:pointer;
display:block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
width:100px;
margin-bottom:10px;
height:20px;
background-color:#ccc;
Border:2px solid black;
border-radius:20px;
}

.slider {
position:absolute;
width:400px;
height:100%;
top:0;
right:-400px;
background-color:#ccc;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.slider_two {
top:100%;
left:0;
right:0;
width:100%;
}

.slider_three {
top:-100%;
left:20%;
right:0;
width:50%;
}

#one:not(:checked) ~ .slider_two ~ .slider_three, #two:not(:checked) ~ .slider_one ~ .slider_three, #three:not(:checked) ~ .slider_one ~ .slider_two {
-webkit-transition-delay:0.2s;
-moz-transition-delay:0.2s;
transition-delay:0.2s;
}

#one:checked ~ .slider_one {
right:0;
}

#two:checked ~ .slider_two {
top:20%;
}

#three:checked ~ .slider_three {
top:0%;
}

HTML部分

<iframe src="video.html" id="iframe_back" border=0 name="Background_1"></iframe>

<input type="radio" name="slider" id="one">
<input type="radio" name="slider" id="two">
<input type="radio" name="slider" id="three">    

<label for="one">slider one</label>
<label for="two">slider two</label>
<label for="three">slider three</label>

<div class="slider slider_one">one</div>
<div class="slider slider_two">two</div>
<div class="slider slider_three">three</div> 

寻找CSS / HTML解决方案而不是Jscript

由于