TIL/Frontend

[CSS] 의사 클래스 hover, focus, active 차이점(23.12.22)

쓱쓱565 2023. 12. 26. 09:54


1. 찾아보게 된 이유

  • 구현할 내용: 특정 객체에 mouse hover시 Bootstrap tooltip을 표시하는 기능
  • 구현한 내용:
    • 아래의 코드와 같이 구현.
    <BButton
      variant="check"
      size="sm"
      v-b-tooltip="$tt('saveArticle')"
    	@click="saveArticleBtnClicked"
    />
    • 버그: 클릭한 이후에도 tooltip 이 사라지지 않음.

2. 해결

  • tooltip의 옵션에 ‘hover’ 추가.
<BButton
  variant="check"
  size="sm"
  v-b-tooltip.hover="$tt('saveArticle')"
  @click="saveArticleBtnClicked"
/>

3. 배웠던 내용

  • 의사 클래스들의 구체적인 사양
    • focus: 특정 html 요소가 focus 됨. 보통 요소가 클릭 or 탭 되었을 때.
    • active: 특정 html 요소가 활성화 됨. 보통 사용자가 요소를 클릭한 이후 - 클릭 버튼 떼기 전까지.

4. 레퍼런스

 

:hover - CSS: Cascading Style Sheets | MDN

:hover CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다.

developer.mozilla.org

 

 

:focus - CSS: Cascading Style Sheets | MDN

CSS :focus 의사 클래스는 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동합니다.

developer.mozilla.org

 

의사 클래스 - CSS: Cascading Style Sheets | MDN

CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을

developer.mozilla.org

 

 

:active - CSS: Cascading Style Sheets | MDN

:active CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타냅니다. 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다.

developer.mozilla.org