0

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

原因是我在 iframe 中开始播放视频，并且希望在屏幕上出现一些内容时用简单的背景 html 文档替换它。我可以将单选按钮的标签设为超链接，但这需要在标签上单击 2 次，在按钮上单击 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

谢谢

4

0 回答 0