Выбранный div не должен зависать в слайд-шоу [JsFiddle] - PullRequest
Новая
       64

Выбранный div не должен зависать в слайд-шоу [JsFiddle]

0 голосов
/ 05 июня 2019

Выбранный (тот, что перед) идентификатор, который отмечен в слайд-шоу, не должен зависать, я не знаю, как заставить его работать?Посмотрите на 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/

Если вы наведите курсор мыши на основное изображение спереди, появится ошибкав нижней части площади.Поэтому мне нужно, чтобы оно не зависало.

Ответы [ 2 ]

0 голосов
/ 05 июня 2019

Просто добавьте код 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">&times;</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>
0 голосов
/ 05 июня 2019

Удалите ": hover" из выбранного вами идентификатора.

ex: # slide2: hover {} становится # slide2 {}

...