CSS-마우스 오버가 요소를 통과하여 커버 된 요소에 마우스 오버를 활성화합니다.

CSS-마우스 오버가 요소를 통과하여 커버 된 요소에 마우스 오버를 활성화합니다.

---

많은 위치 절대 및 Z- 인덱싱을 포함하는 페이지 레이아웃이 있으므로 서로 겹치는 많은 요소가 있습니다.

요소 중 하나는 텍스트 만 포함하고 다른 많은 것 위에 떠 있습니다.

해당 요소 아래에는 CSS Hover Pseudo Classes가 적용된 여러 요소가 있습니다.

마우스가 텍스트가 포함 된 요소를 지나갈 때 아래 요소가 마우스의 존재에 응답하고 의사 클래스 스타일을 활성화하기를 원합니다.

요소의 스타일을 지정하여 마우스 오버가 아래의 모든 요소를 ​​통과 할 수 있도록하는 방법이 있습니까?

이것은 JavaScript로 너무 어렵지 않지만 가능한 한 간단하게 유지하기 위해 지금은 그 길을 가고 싶지 않습니다. 나는 나중에 자바 스크립트로 일을 복잡하게 만들 것이다.

감사

추신-저는 이미 HTML5와 CSS3를 사용하고 있으므로 이러한 새로운 표준을 활용하는 솔루션에 문제가 없을 것입니다.

---

pointer-events: none;맨 위에있는 요소에 사용할 수 있습니다 .

div {
   width   : 200px;
   height  : 200px;
   float   : left;
   cursor  : pointer;
   border  : 1px green solid;
}

div + div:hover { background: #a1a6c8; }

div:first-child {
   pointer-events : none;
   position       : absolute;
   top            : 100px;
   left           : 100px;
   border         : 1px green solid;
   background     : #c1c6c8;
}

  <div> on top of all: hover me </div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>


    

보시다시피 맨 위에있는 요소를 가리키면 뒤에있는 요소가 활성화됩니다. 이 속성에 대한 자세한 정보 : https://developer.mozilla.org/en/CSS/pointer-events

---

또한 사람들이 유용하다고 생각하는 것은 pointer-events : none 요소의 자식 요소를 명시 적으로 pointer-events : auto로 설정하여 포인터 이벤트를 다시 활성화 할 수 있다는 것입니다. 이것은 잘 문서화되지 않은 것처럼 보이며 매우 유용합니다. – 슬라이스 두꺼비

@slicedtoad의 의견은 나에게 매우 유용했기 때문에 완전한 대답을 할 가치가 있다고 생각합니다. pointer-events: none부모로 설정 하면 자식에 대한 이벤트를 비활성화합니다. 그러나 point-events: auto아이들 에게 설정 하면 다시 작동합니다.

이것은 또한 아이들이 부정적 일 때 작동 z-index하여 포인터 이벤트에 반응하지 않게됩니다.

참조 URL : https://stackoverflow.com/questions/9738984/css-hover-passes-through-elements-to-activate-hover-on-covered-element