pointer-events 속성을 사용하여 CSS의 특정 요소에 대한 Hover/Mouseover 이벤트를 무시하는 방법

나는 최근에 내 고객 중 한 명을 위해 팀 갤러리 페이지를 만들었습니다. 각 갤러리 항목은 마우스를 위로 이동하면 색상이 변경되는 오버레이를 사용하는 UI 카드로 표시됩니다. 하지만 이 튜토리얼에 영감을 준 문제에 부딪쳤습니다.

UI 카드 콘텐츠 및 구조

각 갤러리 카드 항목은 다음 요소로 구성됩니다.

• 직원 사진 - 흑백
• 직원 이름 - 흰색
• 직원 역할 - 백인
• 미묘하게 어두운 배경 오버레이

사용자가 각 카드 위로 마우스를 이동하면 배경 오버레이가 밝은 반투명 노란색(브랜드 색상)으로 전환됩니다.

UI 카드 예시

이 튜토리얼을 특정 문제 해결에 집중하고 싶기 때문에 여기 간단한 (디자인 면에서) UI 카드가 어떻게 보이는지 버전입니다. 그 위로 마우스를 움직여 배경색이 밝은 노란색으로 바뀌는 것을 확인하십시오.

하지만 문제가 있습니다. 이미 눈치채셨을 수도 있습니다. 텍스트 영역 위로 마우스를 움직여 보십시오. 문제가 보입니까?

마우스가 텍스트 요소 영역 위로 이동하는 즉시 호버 이벤트가 취소됩니다 — 즉시 노란색에서 회색으로 기본 비활성 상태로 돌아갑니다. 허용되지 않습니다!

HTML 코드는 다음과 같습니다.

<div class="card">
  <div class="card-overlay"></div>
  <img
    class="card-image"
    src="/article/uploadfiles/202203/2022033109324298.jpg"
  />
  <div class="card-info">
    <div class="card-name">Employee Name</div>
    <div class="card-role">Employee Role</div>
  </div>
</div>

CSS:

.card {
  max-width: 350px;
  position: relative;
}

.card-overlay {
  background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.6s;
}

.card-overlay:hover {
  background-color: rgba(255, 204, 7, 0.5);
}

.card-image {
  max-width: 100%;
  display: block;
}

.card-info {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

.card-name,
.card-role {
  color: white;
  font-size: 1.5rem;
  line-height: 1.25;
  padding: 0.25rem;
}

.card-name {
  font-weight: bold;
}

그래서 텍스트 영역 위로 마우스를 이동할 때 호버 이벤트가 취소되는 이유는 무엇입니까?

HTML의 스택 순서 때문입니다. 스태킹 순서는 일반적으로 CSS z-index에 의해 제어됩니다. 재산. 그러나 기본 스태킹 순서가 있습니다. 먼저 CSS로 직접 처리하지 않으면 발생합니다.

z-index 스택 주문입니다. CSS 속성. z-index가 가장 높은 요소 값(숫자)은 position를 가정하여 다른 요소 앞에 놓입니다. 값은 동일합니다. 기본 z-index 웹 페이지의 모든 요소 값은 auto입니다. , 이는 0 0과 동일합니다. .

따라서 절대 위치에 있는 두 개의 요소가 있고 둘 다 기본 z-index가 있기 때문에 auto의 (0) 스택 순서에서 그 중 어느 것이 다른 것보다 앞에 있습니까(하나가 이겨야 함)?

HTML에서 마지막에 오는 것이 이깁니다.

이 경우 <div class="card-info"> 이름과 역할 텍스트 요소를 포함하는 컨테이너는 card-overlay 뒤에 옵니다. 요소:

<div class="card">
  <div class="card-overlay"></div>
  <img
    class="card-image"
    src="/article/uploadfiles/202203/2022033109324298.jpg"
  />
  <div class="card-info">
    <div class="card-name">Employee Name</div>
    <div class="card-role">Employee Role</div>
  </div>
</div>

UI 카드 예에서 텍스트 요소 위로 마우스를 이동하면 더 이상 오버레이 요소를 가리키지 않고 <class="card-info"> :hover가 없는 요소 (의사 클래스)가 첨부되었습니다. .card만 (CSS 코드 참조).

무엇을 할 수 있나요?

물리적으로 <div class="card-overlay"></div>를 이동하는 경우 아래 아래로 요소 <div class="card-info>...</div> 다음과 같은 요소:

<div class="card">
  <img
    class="card-image"
    src="/article/uploadfiles/202203/2022033109324298.jpg"
  />
  <div class="card-info">
    <div class="card-name">Employee Name</div>
    <div class="card-role">Employee Role</div>
  </div>
  <div class="card-overlay"></div>
</div>

그러면 스태킹 순서가 바뀌고 다음과 같은 일이 발생합니다.

좋습니다. 이제 텍스트 영역 위로 마우스를 이동할 때 오버레이 전환이 중단되지 않습니다(시도).

하지만 잠시만요... 이제 스택 순서가 바뀌었으므로 텍스트 요소가 오버레이에 의해 회색으로 표시되고 이제 오버레이가 맨 위에 표시됩니다.

다른 문제를 만드는 동안 문제를 해결했습니다.

하지 않습니다. 그 접근 방식을 사용하고 <div class="card-overlay"> 요소를 원래 위치로 되돌립니다.

대신 .card-overlay를 제공하면 어떻게 될까요? 클래스 z-index 1의 값 ?

이제 card-overlay card-info 앞에 놓입니다. (여전히 z-index: 0이 있습니다. ) 스택 순서가 더 높기 때문입니다(z-index: 1 ) 이제 호버 이벤트의 색상 변경이 중단 없이 다시 작동합니다. 훌륭하지만...

불행히도 이렇게 하면 <div class="card-overlay">를 물리적으로 이동할 때와 똑같은 결과가 나타납니다. <div class="card-info"> 아래 요소 요소. 이번에는 CSS를 사용하여 스택 순서를 직접 변경했습니다. 텍스트 요소는 여전히 있습니다. 오버레이에 의해 회색으로 표시됩니다.

이것은 용납할 수 없습니다!

구조에 대한 포인터 이벤트!

CSS에 pointer-events라는 속성이 있다는 것이 갑자기 생각났습니다. 요소가 반응해야 하는지 여부를 결정할 수 있습니다. 포인터 이벤트에.

포인터 이벤트 클릭, 스크롤 또는 요소 위로 마우스 이동(호버링)과 같이 마우스 작업을 수행해야 하는 모든 것입니다.

그래서 간단히 pointer-events: none;을 추가했습니다. 내 .card-info로 그의 클래스:

.card-info {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  pointer-events: none; /* the fix! */
}

이제 마우스오버 이벤트를 취소하지 않고 텍스트를 포함한 전체 UI 카드 위로 마우스를 이동할 수 있으며 텍스트 요소는 100% 흰색을 유지합니다.

CodePen 코드를 확인하세요.