목록호버 (4)

깜놀하는 해므찌로

Tailwind hover 호버 시 커짐, 확대 효과 / force element state

class="hover:bg-primary hover:text-white hover:scale-[1.2] transition-transform" 1. force element state -> :avtive, :hover, :focus 등 2. scale : 확대 효과 3. transition-transform : 서서히 커지도록 애니메이션 효과
IT 2023. 6. 30. 12:22
Angular hover 시 목록 값 보여주기 예시 / 마우스 호버

{{item.status}} 재고 상태 상세 2022-01-10 페퍼로니 ({{item.sequence}}) 출고승인 2022-01-10 페퍼로니 ({{item.sequence}}) 출고승인 1. mouseover, mouseleave 활용 2. 목록에 노출된 아이템의 고유 번호와 호버 시 해당 아이템의 고유 번호를 비교 isStatus: boolean = false; // 호버 여닫 여부 selectedId!: number; // 호버 시 선택 된 값 저장 statusOver(inventory: Inventory) { if (!inventory.status) { this.selectedId = 0; return; } this.isStatus = true; this.selectedId = inventor..
IT 2023. 6. 21. 17:30
Angular 호버 유지

IT 2023. 5. 9. 14:03
Tailwind CSS 마우스 클릭 시 border

class="focus-within:hover:border-primary focus-within:border-primary"
IT 2023. 5. 7. 21:32
이전 Prev 1 Next 다음