위어드섹터 공식 블로그

프로젝트를 진행하면서 버튼에 마우스를 올리면, 최상단에 있는 버튼이 오른쪽 → 왼쪽으로 이동하면서 아래에 있는 버튼이 보이도록 구현해야 했습니다. 무슨 말인지 잘 이해가 안 가시죠? 아래 동영상으로 확인해주세요ㅎㅎ :) 1. 시도했던 방법 처음에 저는 아래와 같이 스타일을 주었습니다. a. 회색 버튼 위에 노란색 버튼을 position: absolute를 주어 회색 버튼 위에 배치합니다. b. 노란색 버튼에 마우스가 hover하거나, focus가 가면 노란색 버튼의 left 값을 -101% 를 주어 왼쪽으로 이동하도록 합니다 자연스럽게 이동되도록 transition 효과도 주었습니다:) 이렇게 했더니 노란색 버튼이 왼쪽으로 이동하면서 마우스가 노란색 버튼에 hover 되지 않고, 회색 버튼에 hover ..