:hover 선택기가 작동하지 않는 이유

The post is suitable for anyone with a basic knowledge of CSS

CSShover 선택기를 사용하려고 시도했지만 제대로 작동하지 않는 것 같습니까? 또는 더 나쁜 것은 잘못된 요소에 적용되는 것입니까?!?

당신이 나와 같다면 많은 일이 일어났습니다.

그리고 오랫동안 나는 당황했습니다.

즉, 지금까지.

세부 정보

호버 효과의 예를 살펴보겠습니다.

.parent1 :hover{
  background-color:red;
}

해당 클래스가 마우스를 가져갈 때 parent1 클래스의 배경색을 빨간색으로 변경할 것이라고 생각하십니까?

당신은 틀렸을 것입니다.

이제 이것을 살펴보십시오.

.parent1:hover{
  background-color:red;
}

이것이 parent1 클래스의 배경색을 빨간색으로 변경한다고 믿으시겠습니까?

그렇다면 당신 말이 맞을 것입니다.

그러나 차이점은 무엇입니까? 차이점을 구분할 수 없다면 용서받을 수 있습니다. 처음에는 구분하지 않았다는 것을 압니다.
:hover 앞의 공백 문자입니다.

CSS의 공백 문자는 descendant combinator 입니다. 이 경우 요소 자체가 아니라 요소의 모든 자식 요소에 호버 효과를 적용한다는 의미입니다.

그것은 겉보기에 무해한 공간에 대한 꽤 큰 차이입니다.

비교

내가 의미하는 바를 보려면 아래 예를 살펴보십시오.


이 이야기의 교훈 ?

간격을 염두에 두십시오!

Slán go fóill

호버 효과가 작동하지 않는 이유에 대한 혼란이 해결되셨기를 바랍니다.

아래에 자유롭게 질문하거나 댓글을 달거나 기여해 주세요!

그리고 당신이 관대하다고 느끼신다면 아래 링크로 저에게 커피를 사주실 수 있습니다.