CSS : CSS 슬라이더에서 호버가 작동하지 않습니다.

Question

사람들이 마우스로 마우스를 가져 가면이 순수한 CSS 슬라이더의 '이전'및 '다음'화살표가 청록색으로 사라지도록하려고합니다. (또는 모바일 버전의 화살표를 누를 때) 기본 어두운 회색 화살표가 일부 사진에서 잘 보이지 않기 때문에. 이미 청록색 이미지 파일을 준비 했으므로 마우스를 가져 가면 CSS 애니메이션이 사라지게됩니다. 여기

는 CSS 슬라이더가있는 웹 페이지입니다 : http://melodywai.com/sodium.html

을 그리고 여기에 화살표에 관한 CSS 스타일 시트의 조각입니다 :

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

내가 제안을 찾고있는에 클래스를 타겟팅 할 수 없거나 어떤 이유로 든 실제로 슬라이더에서이 슬라이더로 작업 할 수없는 경우

감사합니다.

Answer 1

시도

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

Answer 2

을 추가 당신이 그 (것)들에게이 방법을 타겟팅 할 수 있습니다.

a.arrow.arrow-prev:hover { 

} 

a.arrow.arrow-next:hover { 

} 

는 포토샵과 청록색 파란색 화살표를 설계하고 호버에 예를 들어, 화살표 컨테이너의 배경 이미지를 변경해야합니다이를 위해이 간단한 솔루션입니다

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 
} 

그것은 보이는 것 전환 효과가 좋습니다.

이 정보가 도움이되는지 또는 더 많은 제안이 필요하면 알려주세요.