가상 클래스 선택자

CSS 가상 셀렉터(Pseudo Selector) :active, :hover, :focus, :link, :visited

• :hover
  가상 셀렉터 :hover를 이용하면 마우스가 해당 요소 위에 있을 때 요소의 스타일 변경할 수 있습니다. 밑에 보이는 예제의 입력창에 마우스를 올려놓으면 색깔이 변경되는 것을 볼 수 있습니다.

• :active
  가상 선택자 :active를 이용하면 사용자의 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경할 수 있습니다. 아래 예제의 입력창을 클릭해서 마우스를 뗄 때까지 색깔이 변경하는 것을 확인할 수 있습니다.

• :focus
  사용자의 마우스가 해당 요소를 클릭하면 요소의 스타일 변경할 수 있습니다. 클릭 이외에도 탭 키를 이용해서 요소를 선택해도 활성화됩니다.
  focus 가상 클래스는 가장 마지막에 사용하는 것이 좋습니다.

• :visited
  사용자가 방문한 적이 있는 링크를 나타냅니다.

• :link
  사용자가 방문한 적이 없는 링크를 나타냅니다.

  
  

See the Pen Untitled by joon (@jackma914) on CodePen.