슬라이더의 화살표 hover에 관해 질문드립니다.

Question

강사님 안녕하세요. 강의 내용에서 질문은 아니지만, 혼자 슬라이더 화살표에 효과를 적용해보다 궁금한 부분이 있어 질문드립니다. 아래 사진 처럼 슬라이더 화살표의 색상을 검은색(마우스를 올리지 않았을 때)->주황색(마우스를 올렸을 때)으로 바꾸려고, css에서 해당 부분의 hover를 다음과 같이 수정했습니다. 적용하려는 디자인 코드 .slide-prev-hover:hover { transition : transform 0.5s ; transform : translateX ( -2PX ); color : orange ; // 이 부분을 추가 } .slide-next-hover:hover { transition : transform 0.5s ; transform : translateX ( +2PX ); color : orange ; // 이 부분을 추가 } 이 외에 js나 html 코드는 강사님과 전부 똑같습니다. 제가 궁금한 점은 맨 처음에 (<) 버튼에 마우스를 올리면 주황색으로 잘 변하는데, 이후 활성화된 버튼들은 마우스를 올려도 전혀 색상이 변하지 않습니다. 그런데 색상은 변하지 않지만, translateX(2px)로 적용한 효과는 계속 제대로 움직입니다. 맨 처음 (<) 버튼에만 주황색이 적용되는 이유가, javascript로 color를 따로 적용하지 않았을 때만 정상적으로 동작하는 것 같다고 생각이 드는데 정확한 원인을 파악하기 어려워 질문 드립니다. 혹시 어떤 부분에서 문제가 발생한 것인지 알 수 있을까요?

잔재미코딩 DaveLee · Answer

안녕하세요. 제가 정확하게 의견을 딱 어떤 부분이 문제라고 이야기드리기가 아무래도 해당 코드를 테스트해보기는 어려워서 어려울 수 있지만, 왠지 slide-prev-hover 이런 클래스는 제가 javascript 로 색깔을 지정을 하는 코드도 넣었었거든요. 혹시 그런 부분이 충돌이 되어서, 그런 것일지도 한번 검토해보셔도 좋을 것은 같습니다. slidePrev.style.color = '#2f3059'; slidePrev.classList.add('slide-prev-hover'); slidePrev.addEventListener('click', transformPrev); 아니시면, 해당 클래스의 hover 를 넣지 않고, 기본 색상을 한번 설정해보시는 것은 어떠실까요? 감사합니다.