인프런 커뮤니티 질문&답변
작성한 질문수
슬라이더의 화살표 hover에 관해 질문드립니다.
해결된 질문
작성
·
362
0
강사님 안녕하세요. 강의 내용에서 질문은 아니지만, 혼자 슬라이더 화살표에 효과를 적용해보다 궁금한 부분이 있어 질문드립니다.
아래 사진 처럼 슬라이더 화살표의 색상을 검은색(마우스를 올리지 않았을 때)->주황색(마우스를 올렸을 때)으로 바꾸려고, css에서 해당 부분의 hover를 다음과 같이 수정했습니다.
적용하려는 디자인
코드
이 외에 js나 html 코드는 강사님과 전부 똑같습니다.
제가 궁금한 점은 맨 처음에 (<) 버튼에 마우스를 올리면 주황색으로 잘 변하는데, 이후 활성화된 버튼들은 마우스를 올려도 전혀 색상이 변하지 않습니다. 그런데 색상은 변하지 않지만, translateX(2px)로 적용한 효과는 계속 제대로 움직입니다. 맨 처음 (<) 버튼에만 주황색이 적용되는 이유가, javascript로 color를 따로 적용하지 않았을 때만 정상적으로 동작하는 것 같다고 생각이 드는데 정확한 원인을 파악하기 어려워 질문 드립니다. 혹시 어떤 부분에서 문제가 발생한 것인지 알 수 있을까요?
답변 1
0
안녕하세요.
제가 정확하게 의견을 딱 어떤 부분이 문제라고 이야기드리기가 아무래도 해당 코드를 테스트해보기는
어려워서 어려울 수 있지만,
왠지 slide-prev-hover 이런 클래스는 제가 javascript 로 색깔을 지정을 하는 코드도 넣었었거든요.
혹시 그런 부분이 충돌이 되어서, 그런 것일지도 한번 검토해보셔도 좋을 것은 같습니다.
slidePrev.style.color = '#2f3059';
slidePrev.classList.add('slide-prev-hover');
slidePrev.addEventListener('click', transformPrev);
아니시면, 해당 클래스의 hover 를 넣지 않고, 기본 색상을 한번 설정해보시는 것은 어떠실까요?
감사합니다.
아아 말씀해주신 javascript로 적용한 slidePrev.style.color = '#2f3059'; 코드와 css가 충돌하는 이유가 맞는 것 같습니다!!! hover를 넣지 않고 기본 색상을 적용해서 테스트 해봤는데, js가 적용되지 않은 맨 처음 (<) 버튼만 hover 색상이 정상적으로 동작합니다.
slidePrev.style.color = '#2f3059'; 코드가 slidePrev에 html 속성으로 style이 적용됐다는 걸 인지하지 못했었습니다. html style로 적용한 경우, js로 적용한 class 선택자보다 우선순위가 높기 때문에 일어난 문제였습니다. 아래 코드 처럼 변경하니 잘 적용됩니다! 도움주셔서 감사합니다!