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

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. 레퍼런스

• 의사 클래스: https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
• :focus : https://developer.mozilla.org/ko/docs/Web/CSS/:focus 
• :hover : https://developer.mozilla.org/ko/docs/Web/CSS/:hover
• :active : https://developer.mozilla.org/ko/docs/Web/CSS/:active

:hover - CSS: Cascading Style Sheets | MDN

 

:focus - CSS: Cascading Style Sheets | MDN

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

 

:active - CSS: Cascading Style Sheets | MDN