CSS에서 '가시성: 숨김'이 있는 요소에 마우스오버 효과가 작동하지 않는 이유는 무엇입니까?

CSS에서 가시성이 작동하지 않는 경우: 문제를 해결하는 이유와 방법은 다음과 같습니다.

CSS 스타일 지정 시 모호함으로 인해 예상치 못한 결과가 발생할 수 있습니다. 'visibility' 속성을 사용하여 텍스트를 숨기려고 할 때 직면하는 일반적인 문제를 살펴보겠습니다.

문제:

CSS는 다음과 같습니다.

.spoiler {
    visibility: hidden;
}

.spoiler:hover {
    visibility: visible;
}

이 구성에 따르면 '.spoiler' 클래스가 있는 텍스트 위로 마우스를 가져가면 해당 텍스트가 표시됩니다. 그러나 이런 일은 발생하지 않으며 마우스 위치에 관계없이 텍스트가 보이지 않게 됩니다.

이유:

문제는 숨겨진 요소의 기본 동작에 있습니다. '가시성: 숨김'이 있는 요소는 호버를 포함한 마우스 이벤트 중에 사용자 에이전트에서 인식되지 않습니다. 따라서 호버 상태는 절대 활성화되지 않습니다.

해결책 1: 요소 중첩

이 문제를 극복하려면 스포일러 텍스트를 다른 요소 안에 중첩할 수 있습니다. 요소:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span>

이 솔루션은 중첩된 범위 요소 때문에 작동합니다. 숨겨진 가시성은 처음에 마우스 이벤트를 차단합니다. 그러나 '.spoiler' 상위 요소가 hover 이벤트를 수신하면 스팬 요소가 활성화되어 표시되어 텍스트가 표시됩니다.

해결책 2(Chrome에만 해당): 개요 트릭

Chrome의 또 다른 접근 방식은 '.spoiler'에 개요를 추가하는 것입니다. 요소:

.spoiler {
    outline: 1px solid transparent;
}

이 기술은 마우스 이벤트에 반응하는 보이지 않는 히트박스를 생성하여 호버 효과가 숨겨진 요소에서 제대로 작동하도록 합니다.

위 내용은 CSS에서 '가시성: 숨김'이 있는 요소에 마우스오버 효과가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!