勾选ID后停用悬停功能

Question

您好，我想尝试确定一个ID，即s1-s5。在html中选中或选中它时没有我的悬停效果。我将显示代码，也许您理解我的意思。即使我用谷歌也无法弄清楚答案。位置：固定不起作用。

我在这里查看了关于模拟主题的stackoverflow，并尝试了很多，其中一些仍然在代码中无法正常工作。那里有坏话。

          ///////// HTML //////////

 <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="images/Ambient/hosono-II-header-600x460.png"  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>

#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: 53px;
}
#slide2 { 
    top: 53px;
}
#slide3 { 
    top: 53px;
 }
#slide4 { 
    top: 53px;
 }
#slide5 { 
    top: 53px;
}
#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;
 }
#s2:checked { 
    position:fixed;
 }
#s3:checked { 
    position:fixed;
 }
#s4:checked {
    position:fixed;
 }
#s5:checked{
    position:fixed;
 }

它可以工作，但是html中的选中ID仍会悬停，不确定在选中时如何使其不悬停。