Hover Pseudo 클래스 소개

호버에 대해 알아보기 전에 기본적인 지식을 살펴보겠습니다. 의사 클래스 란 무엇입니까?

시작하려면 의사 클래스가 선택기 다음에 콜론 뒤에 나타나는 키워드입니다( : ). 이 같은.

h1:active {
  color: blue
}

이 경우 의사 클래스는 active 입니다. 주어진 요소의 상태를 설명하고 있습니다. 요소가 해당 상태에 있으면 연결된 스타일 지정 규칙이 적용됩니다.

많은 의사 클래스가 있으며 모두 나열되어 있습니다here.

오늘 우리는 특정 의사 클래스hover에 대해 이야기할 것입니다.

우리의 버튼

버튼부터 시작하겠습니다. 멋지고 크고 읽기 쉽게 스타일을 지정했습니다.



이제 멋진semantic 버튼이지만 평평합니다. 클릭하면 아무것도 변경되지 않습니다. 클릭할 수 있다는 시각적 표시가 없습니다!

그러면 어떻게 바꿀 수 있습니까?

자바스크립트를 사용하자!

오랫동안 이와 같은 동적 동작을 만들기 위해 JavaScript를 사용했습니다. 예제를 살펴보겠습니다.

이 코드펜은 버튼에 mouseover 이벤트를 추가하고 이 경우 스타일을 적용합니다. mouseover는 마우스가 요소 위에 있을 때 코드가 트리거되는 것처럼 작동합니다. 이 예에는 커서가 더 이상 요소 위에 있지 않을 때 원래 스타일을 재설정하는 mouseout 이벤트도 포함되어 있습니다.

호버

JavaScript 예제에서 mouseover 및 mouseout 함수에는 스타일을 변경하는 논리가 포함되어 있습니다. 하지만 그게 우리가 한 전부입니다. 이를 위해 JavaScript가 필요하지 않습니다!

결과적으로 우리는 그렇지 않습니다. CSS 의사 클래스를 사용하여 동일한 기능을 수행할 수 있습니다.



이 펜은 hover 의사 클래스를 사용하고 있습니다. hover는 사용자가 요소와 상호 작용하지만 아직 활성화하지 않은 경우 트리거됩니다. 이것은 우리가 이전에 사용했던 mouseover 기능과 거의 동일합니다.

또한 button:hover CSS 스타일이 일반 버튼에 대해 정의된 것과 다른 한 mouseout 전혀 필요하지 않습니다. hover는 요소가 해당 상태에 있을 때만 트리거됩니다. 그렇지 않으면 해당 스타일이 표시되지 않습니다. JavaScript 예제에서 했던 것처럼 "꺼질"필요가 없습니다.

If you need to think about it a different way, the JavaScript event is triggered and the styling rules are applied until you supersede them with new rules. In the case of the CSS pseudo-classes, the rules are only applied when the element is in that state and as soon as it isn't the styling no longer appears.

재미있는 예

위에서 우리가 한 것은 특별히 멋진 CSS가 아닙니다. 호버에 표시되는 버튼의 색상을 반전시키는 몇 가지 규칙만 추가했습니다. 그래서 여기에 호버로 할 수 있는 몇 가지 재미있는 예가 있습니다!

결론

그리고 당신은 그것을 가지고 있습니다. 다음에 대화형 상태를 기반으로 요소를 변경하려는 경우 일부 유사 클래스를 확인하고 원하는 것을 찾을 수 있는지 확인하십시오. 가능하면 CSS와 HTML을 사용하는 것이 좋습니다! 그리고 그것은 widely supported 입니다!