미스터리 공개: 호버에서 CSS 가시성이 실패하는 이유

CSS 가시성은 요소 가시성을 조작하는 편리한 방법을 제공하지만 때때로 우연히 발견됩니다. 예상치 못한 장애물. 처음에는 텍스트를 보이지 않게 렌더링하고 마우스를 올리면 표시되도록 "스포일러" 클래스를 정의한 시나리오를 생각해 보세요. 여러분의 기대에도 불구하고 텍스트는 마우스를 올려 놓으려는 노력을 무시하고 숨겨진 상태로 고집스럽게 유지됩니다.

원인 조사

이 당혹스러운 행동의 원인은 자연에 있습니다. 숨겨진 요소의. visible:hidden을 사용하여 요소를 숨기면 요소가 효과적으로 보이지 않게 되고 페이지 레이아웃에서 공간을 차지하지 않습니다. 즉, 그 위로 마우스를 가져가는 것은 본질적으로 공허와 상호 작용하려는 것과 같습니다. 요소는 단순히 호버링 작업을 등록하지 않습니다.

가시성 딜레마 해결

이 장애물을 극복하려면 요소에 눈에 띄는 방법을 제공해야 합니다. 콘텐츠가 숨겨져 있어도 마찬가지입니다. 한 가지 접근 방식은 호버 이벤트를 수신할 수 있는 다른 컨테이너 내에 요소를 중첩하는 것입니다. 이를 달성하는 방법은 다음과 같습니다.

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: E.T. phones home.

설명:

스팬 요소 내에 숨겨진 텍스트를 중첩하면 외부 스포일러 요소가 계속 표시되도록 할 수 있습니다. , 호버 이벤트를 캡처할 수 있습니다. 마우스를 올리면 내부 범위 요소가 표시되어 스포일러 텍스트가 드러납니다.

추가 고려 사항

Chrome과 같은 특정 브라우저에서는 다음과 같은 약간의 문제가 발생할 수 있습니다. 숨겨진 스포일러 요소는 여전히 마우스로 약간 선택할 수 있습니다. 이 문제를 해결하려면 스포일러 요소에 개요를 추가할 수 있습니다.

.spoiler {
    outline: 1px solid transparent;
}

이 투명한 윤곽선은 스포일러 요소가 텍스트의 전체 가시성을 방해하지 않고 호버 이벤트를 수신할 수 있을 만큼 충분한 크기를 갖도록 보장합니다.

이러한 조정을 통해 스포일러 클래스는 완벽하게 작동하여 보존 상태를 유지합니다. 숨겨진 텍스트가 보이지 않고 원활한 호버링 경험을 제공합니다.