Kidsnap Shot (5) - hover했을 때 다른 요소에 transition 적용

저번 시간에는 무한 슬라이더를 구현했다. 이번에는 이미지에 마우스를 올렸을 때 양옆의 화살표 버튼에 transition 효과를 넣어봤다.

SASS를 이용하여 마우스 hover시 다른 요소에 transition 효과주기

transition 효과를 주고 싶은 요소에 trasition과 옵션을 작성한다.
하단에 이벤트가 발생하는 요소에 hover을 추가하고 같은 경로의 요소에 바꾸고 싶은 속성을 작성한다.

.content-slideImg { // 슬라이더 컨테이너
  .content-slideImg-controls { // 버튼 태그가 들어있는 div태그
    width: 100%;
    button { 
      cursor: pointer;
      color: white;
      transition: all 0.1s linear;
      width: 4%;
      height: 8%;
      border-radius: 50%;
    }
  }
}


.content-slideImg:hover {
  .content-slideImg-controls {
    button {
      background-color: blue;
    }
  }
}

결과

마우스 호버시