CSS: Hover ne fonctionne pas sur le curseur css

Question

J'essaie d'obtenir les flèches «précédent» et «suivant» de ce curseur css pur pour «fondre» dans un bleu sarcelle lorsque les gens survolent avec leur souris (ou quand ils tapent sur les flèches dans la version mobile) puisque les flèches gris foncé par défaut n'apparaissent pas aussi bien sur certaines photos. J'ai déjà préparé le fichier d'image bleu sarcelle, il suffit donc de faire fonctionner le survol et le fondu dans l'animation CSS.

Voici une page Web qui a le curseur css: http://melodywai.com/sodium.html

Et voici un extrait de la feuille de style CSS qui concerne les flèches:

.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); 
} 

Je cherche des suggestions sur lesquelles classe à cibler, ou si, pour une raison quelconque, les survols ne peuvent vraiment pas fonctionner sur ce curseur.

Merci!

Answer 1

essayer d'ajouter

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

Answer 2

vous pouvez les cibler de cette façon.

a.arrow.arrow-prev:hover { 

} 

a.arrow.arrow-next:hover { 

} 

pour ce faire, vous devez concevoir les sarcelles flèches bleues avec photoshop et changer hover l'image de fond du conteneur de flèche, par exemple:

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 
} 

c'est une solution simple et il regardera bon avec l'effet de transition.

Dites-moi si cela peut vous aider ou si vous avez besoin de plus de suggestions