호버 시 스타일이 반영되지 않을 때 – ZenBlocks buttonBasic
결론
호버 스타일이 적용되지 않는 원인은 대부분 **Hover 탭 미설정, 트랜지션 Duration 0, CSS 캐시 미갱신**입니다.
—
원인
1. **Hover 탭에 값이 없음**.
2. **Duration이 `0ms`로 설정됨**.
3. **이전 CSS 캐시가 남아 있음**.—
해결 절차
### 1단계: Hover 탭 값 확인
1. `buttonBasic` 블록을 선택합니다.
2. 사이드바의 **스타일 설정**를 엽니다.
3. **Hover** 탭으로 전환합니다.
4. 배경색, 텍스트색, 보더 등 변경할 속성 값이 입력되어 있는지 확인합니다.### 2단계: 트랜지션 설정 확인
1. **트랜지션** 섹션을 엽니다.
2. **Duration**이 `0ms`가 아닌지 확인합니다(권장: `200-400ms`).
3. **이징** 값(`ease`, `ease-out`)을 확인합니다.### 3단계: CSS 캐시 정리
1. 프런트엔드에서 다시 확인합니다.
2. 반영되지 않으면 강력 새로고침(`Ctrl+Shift+R` / `Cmd+Shift+R`)을 수행합니다.
3. 필요 시 `/wp-content/uploads/zenblocks/`를 확인합니다.### 4단계: 애니메이션 충돌 확인
1. 텍스트/아이콘 애니메이션이 활성화된 경우 충돌이 생길 수 있습니다.
2. 관련 패널의 안내 메시지를 확인합니다.
3. `Duration`/`Delay`를 조정해 체감 지연을 줄입니다.—
주의사항
– 호버 동작은 에디터가 아닌 프런트엔드에서 확인해야 정확합니다.
– 애니메이션과 트랜지션을 함께 쓰면 지연 시간이 누적될 수 있습니다.
– 아이콘 애니메이션 활성화 시 `opacity/visibility`는 애니메이션 쪽 CSS가 우선할 수 있습니다.—
관련 설정
– [스타일 설정](../style/)
– [텍스트 애니메이션 설정](../text-animation/)
– [Icon 애니메이션 설정](../icon-animation/)
– [버튼 애니메이션 설정](../button-animation/)