CSS: Hover funktioniert nicht auf css slider

Question

Ich versuche, die 'vorherigen' und 'nächsten' Pfeile dieses reinen CSS-Slider zu "blau" in ein blaugrün "blau", wenn Leute mit der Maus darüber schweben (oder wenn sie in der mobilen Version auf die Pfeile tippen), da die standardmäßigen dunkelgrauen Pfeile in einigen Fotos nicht gut sichtbar sind. Ich habe bereits die blaugrüne blaue Bilddatei vorbereitet, also ist es nur eine Frage des Hovers und der Einblendung der CSS-Animation.

Hier ist eine Webseite, die die CSS Schieber: http://melodywai.com/sodium.html

Und hier ist ein Ausschnitt aus dem CSS-Stylesheet, das auf die Pfeile betrifft:

.carousel-wrapper { position: relative; } 

.carousel-wrapper .carousel-item { 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
padding: 25px 50px; 
opacity: 0; 
transition: all 0.5s ease-in-out; 
height: 500px; 
width: 750px; 
margin-left: auto; 
margin-right: auto; 
} 

.carousel-wrapper .carousel-item .arrow { 
position: absolute; 
top: 50%; 
display: block; 
width: 50px; 
height: 50px; 
background: url("../prev.png") no-repeat; 
z-index:999; 
} 

.carousel-wrapper .carousel-item .arrow.arrow-prev { left: 0; } 

.carousel-wrapper .carousel-item .arrow.arrow-next { 
right: 0; 
-webkit-transform: rotate(180deg); 
transform: rotate(180deg); 
} 

Ich bin für Vorschläge, auf denen suchen Klasse zum Ziel, oder wenn aus irgendeinem Grund wirklich schwebt, kann nicht mit diesem Schieberegler arbeiten.

Danke!

Answer 1

Versuchen Sie,

.carousel-wrapper .carousel-item .arrow:hover{ 
    //do something 
    } 

Answer 2

Sie können sie auf diese Weise ausrichten.

a.arrow.arrow-prev:hover { 

} 

a.arrow.arrow-next:hover { 

} 

dies erreichen Sie die teal blauen Pfeile mit photoshop entwerfen müssen und auf schweben, das Bild des Pfeiles Container, Hintergrund ändern zum Beispiel:

a.arrow.arrow-prev:hover { 
    transition: all 0.2s ease-in-out;     // to give the "fade-in" effect 
    background-image: url("arrow-teal-prev.png");  // to change the arrow img 
} 

a.arrow.arrow-next:hover { 
    transition: all 0.2s ease-in-out;     // to give the "fade-in" effect 
    background-image: url("arrow-teal-next.png");  // to change the arrow img 
} 

dies eine einfache Lösung ist, und es wird aussehen gut mit dem Übergangseffekt.

Sagen Sie mir, wenn dies Ihnen hilft oder Sie weitere Vorschläge benötigen