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

使用单选按钮激活超链接的CSS/HTML,html,css,radio-button,Html,Css,Radio Button,构建一个使用多个单选按钮控制屏幕上下滑动的多个内容div的网站。我想按钮也激活一个新的html加载到iframe,我作为背景屏幕使用 原因是我有视频播放在iframe开始,并想取代它与一个简单的背景html文档时,一些内容出现在屏幕上。我可以使单选按钮的标签成为超链接,但这需要单击两次,一次单击标签,一次单击按钮 CSS部分 #iframe_Back { position:fixed; top: 0; left: 0; height:100%; width:100%; z-index:-1;

构建一个使用多个单选按钮控制屏幕上下滑动的多个内容div的网站。我想按钮也激活一个新的html加载到iframe,我作为背景屏幕使用

原因是我有视频播放在iframe开始,并想取代它与一个简单的背景html文档时,一些内容出现在屏幕上。我可以使单选按钮的标签成为超链接,但这需要单击两次,一次单击标签,一次单击按钮

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> 

滑块一
滑块二
滑块三
一
二
3
寻找CSS/HTML解决方案而不是Jscript


谢谢

您不需要JavaScript的具体原因是什么?我怀疑没有JavaScript您能否做到这一点。首先,iframe和主机页面将被视为两个独立的实体,我不知道如何使用CSS将两者之间的操作联系起来。即使视频嵌入到主页中,您也需要javascript与之交互。抱歉,让我稍微澄清一下,我需要单选按钮将另一个页面加载到iframe,而不是修改当前运行的视频html。同样,没有javascript也无法完成这项工作。CSS和HTML不是为了动态而设计的。我想我会在某个地方添加一个停止视频按钮,将iframe更改为静态背景HTML。