CSS内容滑块项目符号预览

Question

我下面的代码仅用于使用HTML和CSS的内容滑块。 当我将鼠标悬停在底部的3个项目符号之一时，该幻灯片的预览图像会显示在项目符号上方。 这样的事情： http : //www.menucool.com/javascript-image-slider任何帮助，谢谢。

 .pic{ width:100%; height:100%; } .carousel { border-style:solid; border-width:1px; border-color:rgba(0, 0, 0, 0.05); box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1); widht:100%; height:335px; } .carousel-inner { position: relative; overflow: hidden; width: 100%; height:335px; } .carousel-open:checked + .carousel-item { position: absolute; opacity: 100; background-color:white; width:100%; height:335px; } .carousel-item { position: absolute; opacity: 0; padding-top:10px; text-align:center; } .carousel-control { background: rgba(0, 0, 0, 0); border-radius: 50%; color:#008c6c; cursor: pointer; display: none; font-size: 40px; height: 40px; line-height: 35px; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); cursor: pointer; -ms-transform: translate(0, -50%); transform: translate(0, -50%); text-align: center; width: 40px; z-index: 10; } .carousel-control.prev { left: 2%; } .carousel-control.next { right: 2%; } .carousel-control:hover { background: rgba(0, 0, 0, 0.05); color: #008c6c; } #carousel-1:checked ~ .control-1, #carousel-2:checked ~ .control-2, #carousel-3:checked ~ .control-3{ display: block; } .carousel-indicators { margin: 0; padding: 2px; position: absolute; bottom: -7px; left: 0; right: 0; text-align: center; } .carousel-indicators li { display: inline-block; margin: 0 5px; } .carousel-bullet { color: rgba(0, 0, 0, 0.05); cursor: pointer; font-size: 35px; } .carousel-bullet:hover { color: rgba(0, 0, 0, 0.1); } .HRConnectImage {width:375px; padding-top:50px; display:inline-block;} #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet, #carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet, #carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet{ color: #008c6c; } #title { width: 100%; position: absolute; padding: 0px; margin: 0px auto; text-align: center; font-size: 27px; color: rgba(255, 255, 255, 1); font-family: 'Open Sans', sans-serif; z-index: 9999; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0); } #p { text-align:center; font-weight:bold;} 

 <div class="carousel"> <div class="carousel-inner"> <input name="carousel" class="carousel-open" id="carousel-1" aria-hidden="true" type="radio" hidden="true" Checked/> <div class="carousel-item"> <img class="pic" src=""> </div> <input name="carousel" class="carousel-open" id="carousel-2" aria-hidden="true" type="radio" hidden="true"/> <div class="carousel-item"> <img class="pic" src=""> </div> <input name="carousel" class="carousel-open" id="carousel-3" aria-hidden="true" type="radio" hidden="true"/> <div class="carousel-item"> <img class="pic" src=""> </div> <label class="carousel-control prev control-1" for="carousel-3">‹</label> <label class="carousel-control next control-1" for="carousel-2">› </label> <label class="carousel-control prev control-2" for="carousel-1">‹</label> <label class="carousel-control next control-2" for="carousel-3">›</label> <label class="carousel-control prev control-3" for="carousel-2">‹</label> <label class="carousel-control next control-3" for="carousel-1">› </label> <ol class="carousel-indicators"> <li> <label class="carousel-bullet" for="carousel-1">●</label> </li> <li> <label class="carousel-bullet" for="carousel-2">●</label> </li> <li> <label class="carousel-bullet" for="carousel-3">●</label> </li> </ol> </div> </div> 

Answer 1

您在提供的链接中看到的是主滑块内部的完整独立滑块。 但这是简单的。 在lis中的每个标签旁边添加一个元素。 然后为它们定义一个绝对位置，并将高度设置为零。

最后，添加悬停CSS并向其添加过渡。

 .pic{ width:100%; height:100%; } .carousel { border-style:solid; border-width:1px; border-color:rgba(0, 0, 0, 0.05); box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1); widht:100%; height:335px; } .carousel-inner { position: relative; overflow: hidden; width: 100%; height:335px; } .carousel-open:checked + .carousel-item { position: absolute; opacity: 100; background-color:white; width:100%; height:335px; } .carousel-item { position: absolute; opacity: 0; padding-top:10px; text-align:center; } .carousel-control { background: rgba(0, 0, 0, 0); border-radius: 50%; color:#008c6c; cursor: pointer; display: none; font-size: 40px; height: 40px; line-height: 35px; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); cursor: pointer; -ms-transform: translate(0, -50%); transform: translate(0, -50%); text-align: center; width: 40px; z-index: 10; } .carousel-control.prev { left: 2%; } .carousel-control.next { right: 2%; } .carousel-control:hover { background: rgba(0, 0, 0, 0.05); color: #008c6c; } #carousel-1:checked ~ .control-1, #carousel-2:checked ~ .control-2, #carousel-3:checked ~ .control-3{ display: block; } .carousel-indicators { margin: 0; padding: 2px; position: absolute; bottom: -7px; left: 0; right: 0; text-align: center; } .carousel-indicators li { display: inline-block; margin: 0 5px; position: relative; /*You are required to do this*/ } .carousel-indicators .carousel-preview { position: absolute; width: 108px; top: -0; left: 50%; margin-left: -52px; height:0px; transition:0.5s all; overflow: hidden; } .carousel-indicators .carousel-preview img { max-width:100px; max-height:50px; padding: 2px; background-color: #fff; border: solid 2px #ccc; } .carousel-indicators li:hover .carousel-preview { height:54px; top:-50px; } .carousel-bullet { color: rgba(0, 0, 0, 0.05); cursor: pointer; font-size: 35px; } .carousel-bullet:hover { color: rgba(0, 0, 0, 0.1); } .HRConnectImage {width:375px; padding-top:50px; display:inline-block;} #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet, #carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet, #carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet{ color: #008c6c; } #title { width: 100%; position: absolute; padding: 0px; margin: 0px auto; text-align: center; font-size: 27px; color: rgba(255, 255, 255, 1); font-family: 'Open Sans', sans-serif; z-index: 9999; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0); } #p { text-align:center; font-weight:bold;} 

 <div class="carousel"> <div class="carousel-inner"> <input name="carousel" class="carousel-open" id="carousel-1" aria-hidden="true" type="radio" hidden="true" Checked/> <div class="carousel-item"> <img class="pic" src=""> </div> <input name="carousel" class="carousel-open" id="carousel-2" aria-hidden="true" type="radio" hidden="true"/> <div class="carousel-item"> <img class="pic" src=""> </div> <input name="carousel" class="carousel-open" id="carousel-3" aria-hidden="true" type="radio" hidden="true"/> <div class="carousel-item"> <img class="pic" src=""> </div> <label class="carousel-control prev control-1" for="carousel-3">‹</label> <label class="carousel-control next control-1" for="carousel-2">› </label> <label class="carousel-control prev control-2" for="carousel-1">‹</label> <label class="carousel-control next control-2" for="carousel-3">›</label> <label class="carousel-control prev control-3" for="carousel-2">‹</label> <label class="carousel-control next control-3" for="carousel-1">› </label> <ol class="carousel-indicators"> <li> <label class="carousel-bullet" for="carousel-1">●</label> <div class="carousel-preview"> <img src="http://www.menucool.com/slider/jsImgSlider/images/thumb1.jpg" /> </div> </li> <li> <label class="carousel-bullet" for="carousel-2">●</label> <div class="carousel-preview"> <img src="http://www.menucool.com/slider/jsImgSlider/images/thumb3.jpg" /> </div> <li> <label class="carousel-bullet" for="carousel-3">●</label> <div class="carousel-preview"> <img src="http://www.menucool.com/slider/jsImgSlider/images/thumb2.jpg" /> </div> </li> </ol> </div> </div>