所选 div 不应悬停在幻灯片中 [JsFiddle]
The selected div should not hover in the slideshow [JsFiddle]
幻灯片中勾选的选中(前面那个)id不应该悬停,不知道怎么弄?查看 JsFiddle。
用谷歌搜索并无法弄清楚。
/*sliderhover 1*/
#slide1 {
top: 50px;
background-color: darkred;
}
#slide2 {
top: 50px;
background-color: darkred;
}
#slide3{
top: 50px;
background-color: darkred;
}
#slide4 {
top: 50px;
background-color: darkred;
}
#slide5 {
top: 50px;
background-color: darkred;
}
#slide1:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide2:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide3:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide4:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide5:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
https://jsfiddle.net/evwqL0cz/1/
如果将鼠标悬停在前面的主图像上,正方形的底部会出现错误。所以我需要它不要悬停。
从您想要的任何选定 ID 中删除“:hover”。
例如:#slide2:hover{} 变成#slide2{}
只需将 javascript 代码添加到您现有的代码中。
function slidesBehind(){
let selectedSlide =
document.querySelectorAll('input[type="radio"]:not(:checked)');
selectedSlide.forEach(function (s, index) {
let elemtId=s.id;
let elm=elemtId.split('');
elm[1]='slide'+elm[1];
document.querySelector('#'+elm[1]).style.cssText = null;
});
}
function slidefront(){
let selectedSlide =
document.querySelector('input[type="radio"]:checked').id;
let elm=selectedSlide.split('');
elm[1]='slide'+elm[1];
const elem = document.querySelector('#'+elm[1]);
elem.style.top = "50px";
}
slidefront();
document.querySelector('#slider').addEventListener('click', ()=>{
slidesBehind();
slidefront();
})
#slider {
color: white;
height: 30%;
position: relative;
perspective: 900px;
transform-style: preserve-3d;
right:10%;
margin-top:100px;
height: 333px;
}
.slidercontainer{
position: absolute;
padding-top:100px;
}
#slider label {
margin: auto;
width: 45%;
height: 63%;
border-radius: 4px;
position: absolute;
left: 0; right: 0;
cursor: pointer;
transition: transform 0.4s ease;
}
#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
transform: translate3d(-30%,0,-200px);
}
#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
transform: translate3d(-15%,0,-100px);
}
#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
transform: translate3d(0,0,0);
}
#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
transform: translate3d(15%,0,-100px);
}
#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
transform: translate3d(30%,0,-200px);
}
/* vinyl sliderhover 1*/
#slide1 {
top: 50px;
background-color: darkred;
}
#slide2 {
top: 50px;
background-color: darkred;
}
#slide3{
top: 50px;
background-color: darkred;
}
#slide4 {
top: 50px;
background-color: darkred;
}
#slide5 {
top: 50px;
background-color: darkred;
}
#slide1:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide2:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide3:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide4:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide5:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
<section id="slider">
<input type="radio" name="slider" id="s1">
<input type="radio" name="slider" id="s2">
<input type="radio" name="slider" id="s3" checked>
<input type="radio" name="slider" id="s4">
<input type="radio" name="slider" id="s5">
<label for="s1" id="slide1">
<div class="moveuponhover">
<div class="vinylplay">
<a id="play-video" class="video-play-button"
href="javascript:ReplaceContentInContainer('slide-content','Whew!
You clicked!')">
<span></span>
</a>
<div id="video-overlay" class="video-overlay">
<a class="video-overlay-close">×</a>
</div>
</div>
<img src="" width="100%" height="100%" alt=""/>
</div>
</label>
<label for="s2" id="slide2">
<div class="moveuponhover">
<div class="vinylplay">
<a id="play-video" class="video-play-button" href="javascript:ReplaceContentInContainer('slide-content','Whew! You clicked!')">
<span></span>
</a>
</div>
<img src="images/Ambient/R-4538741-1367760456-3876.jpeg.jpg" width="100%" height="100%" alt=""/>
</div>
</label>
<label for="s3" id="slide3">
<div class="moveuponhover">
<div class="vinylplay">
<a id="play-video" class="video-play-button" href="javascript:ReplaceContentInContainer('slide-content','Whew! You clicked!')">
<span></span>
</a>
</div>
<img src="images/Ambient/hiroshiyoshimurawetlands.jpg" width="100%" height="100%" alt=""/>
</div>
</label>
<label for="s4" id="slide4">
<div class="moveuponhover">
<div class="vinylplay">
<a id="play-video" class="video-play-button" href="javascript:ReplaceContentInContainer('slide-content','Whew! You clicked!')">
<span></span>
</a>
</div>
<img src="images/Ambient/tumblr_p2i6l0MBWA1uvvamyo2_250.jpg"
width="100%" height="100%" alt=""/></div></label>
<label for="s5" id="slide5">
<div class="moveuponhover">
<div class="vinylplay">
<a id="play-video" class="video-play-button" href="javascript:ReplaceContentInContainer('slide-content','Whew! You clicked!')">
<span></span>
</a>
</div>
<img src="images/Ambient/pierloft.jpg" width="100%" height="100%" alt=""/></div></label>
</section>
幻灯片中勾选的选中(前面那个)id不应该悬停,不知道怎么弄?查看 JsFiddle。
用谷歌搜索并无法弄清楚。
/*sliderhover 1*/
#slide1 {
top: 50px;
background-color: darkred;
}
#slide2 {
top: 50px;
background-color: darkred;
}
#slide3{
top: 50px;
background-color: darkred;
}
#slide4 {
top: 50px;
background-color: darkred;
}
#slide5 {
top: 50px;
background-color: darkred;
}
#slide1:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide2:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide3:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide4:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide5:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
https://jsfiddle.net/evwqL0cz/1/
如果将鼠标悬停在前面的主图像上,正方形的底部会出现错误。所以我需要它不要悬停。
从您想要的任何选定 ID 中删除“:hover”。
例如:#slide2:hover{} 变成#slide2{}
只需将 javascript 代码添加到您现有的代码中。
function slidesBehind(){
let selectedSlide =
document.querySelectorAll('input[type="radio"]:not(:checked)');
selectedSlide.forEach(function (s, index) {
let elemtId=s.id;
let elm=elemtId.split('');
elm[1]='slide'+elm[1];
document.querySelector('#'+elm[1]).style.cssText = null;
});
}
function slidefront(){
let selectedSlide =
document.querySelector('input[type="radio"]:checked').id;
let elm=selectedSlide.split('');
elm[1]='slide'+elm[1];
const elem = document.querySelector('#'+elm[1]);
elem.style.top = "50px";
}
slidefront();
document.querySelector('#slider').addEventListener('click', ()=>{
slidesBehind();
slidefront();
})
#slider {
color: white;
height: 30%;
position: relative;
perspective: 900px;
transform-style: preserve-3d;
right:10%;
margin-top:100px;
height: 333px;
}
.slidercontainer{
position: absolute;
padding-top:100px;
}
#slider label {
margin: auto;
width: 45%;
height: 63%;
border-radius: 4px;
position: absolute;
left: 0; right: 0;
cursor: pointer;
transition: transform 0.4s ease;
}
#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
transform: translate3d(-30%,0,-200px);
}
#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
transform: translate3d(-15%,0,-100px);
}
#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
transform: translate3d(0,0,0);
}
#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
transform: translate3d(15%,0,-100px);
}
#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
transform: translate3d(30%,0,-200px);
}
/* vinyl sliderhover 1*/
#slide1 {
top: 50px;
background-color: darkred;
}
#slide2 {
top: 50px;
background-color: darkred;
}
#slide3{
top: 50px;
background-color: darkred;
}
#slide4 {
top: 50px;
background-color: darkred;
}
#slide5 {
top: 50px;
background-color: darkred;
}
#slide1:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide2:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide3:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide4:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
#slide5:hover {
top: 0px;
transition: all 0.9s ease 0.1s;
}
<section id="slider">
<input type="radio" name="slider" id="s1">
<input type="radio" name="slider" id="s2">
<input type="radio" name="slider" id="s3" checked>
<input type="radio" name="slider" id="s4">
<input type="radio" name="slider" id="s5">
<label for="s1" id="slide1">
<div class="moveuponhover">
<div class="vinylplay">
<a id="play-video" class="video-play-button"
href="javascript:ReplaceContentInContainer('slide-content','Whew!
You clicked!')">
<span></span>
</a>
<div id="video-overlay" class="video-overlay">
<a class="video-overlay-close">×</a>
</div>
</div>
<img src="" width="100%" height="100%" alt=""/>
</div>
</label>
<label for="s2" id="slide2">
<div class="moveuponhover">
<div class="vinylplay">
<a id="play-video" class="video-play-button" href="javascript:ReplaceContentInContainer('slide-content','Whew! You clicked!')">
<span></span>
</a>
</div>
<img src="images/Ambient/R-4538741-1367760456-3876.jpeg.jpg" width="100%" height="100%" alt=""/>
</div>
</label>
<label for="s3" id="slide3">
<div class="moveuponhover">
<div class="vinylplay">
<a id="play-video" class="video-play-button" href="javascript:ReplaceContentInContainer('slide-content','Whew! You clicked!')">
<span></span>
</a>
</div>
<img src="images/Ambient/hiroshiyoshimurawetlands.jpg" width="100%" height="100%" alt=""/>
</div>
</label>
<label for="s4" id="slide4">
<div class="moveuponhover">
<div class="vinylplay">
<a id="play-video" class="video-play-button" href="javascript:ReplaceContentInContainer('slide-content','Whew! You clicked!')">
<span></span>
</a>
</div>
<img src="images/Ambient/tumblr_p2i6l0MBWA1uvvamyo2_250.jpg"
width="100%" height="100%" alt=""/></div></label>
<label for="s5" id="slide5">
<div class="moveuponhover">
<div class="vinylplay">
<a id="play-video" class="video-play-button" href="javascript:ReplaceContentInContainer('slide-content','Whew! You clicked!')">
<span></span>
</a>
</div>
<img src="images/Ambient/pierloft.jpg" width="100%" height="100%" alt=""/></div></label>
</section>