inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기5

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

해결된 질문

371

김보경

작성한 질문수 9

0

강사님 안녕하세요. 강의 내용에서 질문은 아니지만, 혼자 슬라이더 화살표에 효과를 적용해보다 궁금한 부분이 있어 질문드립니다. 

아래 사진 처럼 슬라이더 화살표의 색상을 검은색(마우스를 올리지 않았을 때)->주황색(마우스를 올렸을 때)으로 바꾸려고, 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를 따로 적용하지 않았을 때만 정상적으로 동작하는 것 같다고 생각이 드는데 정확한 원인을 파악하기 어려워 질문 드립니다. 혹시 어떤 부분에서 문제가 발생한 것인지 알 수 있을까요?

HTML/CSS javascript es6

답변 1

0

잔재미코딩 DaveLee

안녕하세요.

 

제가 정확하게 의견을 딱 어떤 부분이 문제라고 이야기드리기가 아무래도 해당 코드를 테스트해보기는 

어려워서 어려울 수 있지만,

왠지 slide-prev-hover 이런 클래스는 제가 javascript 로 색깔을 지정을 하는 코드도 넣었었거든요.

혹시 그런 부분이 충돌이 되어서, 그런 것일지도 한번 검토해보셔도 좋을 것은 같습니다.

        slidePrev.style.color = '#2f3059';

        slidePrev.classList.add('slide-prev-hover');

        slidePrev.addEventListener('click', transformPrev);

 

아니시면, 해당 클래스의 hover 를 넣지 않고, 기본 색상을 한번 설정해보시는 것은 어떠실까요?

 

감사합니다.

0

김보경

 아아 말씀해주신 javascript로 적용한 slidePrev.style.color = '#2f3059'; 코드와 css가 충돌하는 이유가 맞는 것 같습니다!!! hover를 넣지 않고 기본 색상을 적용해서 테스트 해봤는데, js가 적용되지 않은 맨 처음 (<) 버튼만 hover 색상이 정상적으로 동작합니다.

 slidePrev.style.color = '#2f3059'; 코드가 slidePrev에 html 속성으로 style이 적용됐다는 걸 인지하지 못했었습니다. html style로 적용한 경우, js로 적용한 class 선택자보다 우선순위가 높기 때문에 일어난 문제였습니다. 아래 코드 처럼 변경하니 잘 적용됩니다! 도움주셔서 감사합니다!

.slide-prev-hover:hover {
    transition: transform 0.5s;
    transform: translateX(-2PX);
    color: orange !important; // 우선순위 올리기
}

.slide-next-hover:hover {
    transition: transform 0.5s;
    transform: translateX(+2PX);
    color: orange !important; // 우선순위 올리기
}

교육기간을 연장할 수 있는지 문의드립니다.

0

54

1

메일 확인부탁드립니다

0

69

1

CodeSandbox Vanilla 질문있습니다

0

70

1

part1을 수강하지 않아도 지장이 없다 하셨는데

0

120

1

강의에 관해 문의 드립니다.

0

107

1

메일확인 부탁드립니다.

0

97

1

14강 - 72,73번 강의 영상이 동일한거 같습니다.

0

118

1

Symbol 관련 테스트 코드 실행 결과 문의

0

153

1

호환성 관련 태그

0

126

1

강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요

0

157

1

강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요

0

154

1

div id="highlighter"가 강의화면에는 없는데 왜 샌드박스파일에는 있는지 궁금해요

0

94

1

강의화면에 height 가 vh가 아닌 vw라고 나와있는데 뭐가맞는거죠

0

129

1

메일 확인 부탁드립니다.

0

155

1

메일 확인 부탁드립니다

0

155

1

특별한 형태의 javascript배열에서

0

146

1

메일 확인부탁드립니다!

0

170

1

codesandbox 업데이트..

0

153

1

pdf 파일에 있는 링크주소로 들어가지지가 않습니다.

0

275

2

강의에서 알려주신 Properties for the flex container 복습 사이트, 검색 발견되어서 공유드립니다~

0

160

1

removeEventlistener 를 왜 해주어야 하는지

0

234

1

100vw 관련 질문

0

350

2

VS CODE html:5 <tab>기능이 안됩니다

0

363

1

[모던웹페이지 만들기9](1:40)class-desc 카드부분관련

0

257

2