1
Ich habe den Code unten für ein Bild Karussell mit HTML und CSS. Wie kann ich es so machen, dass die rechten und linken Pfeile nur dann erscheinen, wenn sich Ihre Maus auf dem Karussell befindet, und wenn nicht, verschwinden die Pfeile. Alles hilft, danke.Bild Karussell Verschwinden Pfeile
.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:290px;
border-width:3px;
border-radius:2px;
border-color:#FCFCFC;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
height:290px;
}
.carousel-open:checked + .carousel-item {
position: absolute;
opacity: 100;
background-color:black;
width:100%;
height:290px;
}
.carousel-item {
position: absolute;
opacity: 0;
text-align:center;
}
.carousel-control {
border-radius: 10px;
border: 1.5px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
color:rgba(255, 255, 255, 0.9);
cursor: pointer;
display: none;
font-size: 30px;
height: 40px;
line-height: 25px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 30px;
height:30px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
color: #4F94CD;
background-color:rgba(255, 255, 255, 0.9);
}
.carousel-control:hover:after {
content: '';
position: absolute;
border-radius:50%;
background:transparent;
border: 1.5px solid rgba(255, 255, 255, 0.2);
background:rgba(255, 255, 255, 0.2);
top: -5px;
left: -6px;
right: -5px;
bottom: -6px;
z-index: -5;
}
#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: -4.5px;
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: white;
}
.carousel-indicators li:hover .carousel-preview {
height:54px;
top:-50px;
}
.carousel-bullet {
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
font-size: 20px;
}
.carousel-bullet:hover {
color: rgba(255, 255, 255, 0.9);
}
.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: rgba(255, 255, 255, 0.9);
}
#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="http://wearenorthwest.northwest.ca/departments/humanresources/test/PublishingImages/O%20Gibraltar.PNG">
</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="http://wearenorthwest.northwest.ca/departments/humanresources/test/PublishingImages/ADC.PNG">
</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="http://wearenorthwest.northwest.ca/departments/humanresources/test/PublishingImages/CUL.PNG">
</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>
Das Thema hat mehr mit dem Konzept zu tun: schweben und Element Kinder, als es mit einem ‚Karussell‘ tut - so würde ich vorschlagen, dass Sie eine kleinere bauen gezielte jsFiddle die Quelle zu bekämpfen - und dann wenden Sie das, was Sie finden, auf einen größeren Kontext an. :) – sheriffderek