CSS - Di chuột qua các phần tử để kích hoạt di chuột trên phần tử được bao phủ

Question

Tôi có bố cục trang liên quan đến nhiều vị trí tuyệt đối và chỉ mục z, vì vậy có rất nhiều phần tử chồng chéo nhau.

Một trong các yếu tố chỉ chứa văn bản và nó di chuyển trên đầu trang của rất nhiều thứ khác.

Bên dưới phần tử đó có một số yếu tố có Lớp học giả CSS Hover được áp dụng.

Khi chuột di chuyển qua phần tử chứa văn bản, tôi muốn bằng cách nào đó phần tử bên dưới phản hồi sự hiện diện của con chuột và kích hoạt kiểu lớp giả.

Có cách nào để tạo kiểu cho một phần tử để nó cho phép di chuột qua nó đến bất kỳ phần tử nào bên dưới không?

Điều này sẽ không quá khó với JavaScript, nhưng tôi không muốn đi tuyến đường đó vào lúc này để giữ mọi thứ đơn giản như chúng có thể. Tôi sẽ làm phức tạp mọi thứ với JavaScript đủ sau.

Cảm ơn

P.S. - Tôi đang sử dụng HTML5 và CSS3, vì vậy tôi sẽ không có vấn đề với các giải pháp sử dụng các tiêu chuẩn mới hơn này.

Answer 1

bạn có thể sử dụng pointer-events: none; đến yếu tố trên:

thấy http://jsfiddle.net/7aeDt/

như bạn có thể thấy, khi bạn di chuột phần tử trên đỉnh yếu tố đằng sau được kích hoạt. Để biết thêm về khách sạn này: https://developer.mozilla.org/en/CSS/pointer-events

dụ:

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

css

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; 
} 

Answer 2

Ngoài ra, một cái gì đó mà mọi người có thể tìm thấy hữu ích là bạn có thể kích hoạt lại các sự kiện con trỏ trên con các phần tử của các sự kiện con trỏ: không có phần tử nào bằng cách đặt chúng thành các sự kiện con trỏ: tự động một cách rõ ràng. Điều này dường như không được tài liệu tốt và hóa ra lại rất hữu ích. - slicedtoad

nhận xét của @ slicedtoad cực kỳ hữu ích cho tôi, vì vậy tôi nghĩ nó xứng đáng là câu trả lời đầy đủ. Nếu bạn đặt pointer-events: none thành cha mẹ, bạn sẽ tắt các sự kiện cho con của nó. BAO GIỜ, nếu bạn đặt point-events: auto cho trẻ em, chúng sẽ hoạt động trở lại.

Điều này cũng hoạt động khi trẻ có số âm z-index và do đó không phản hồi đối với sự kiện con trỏ.