ngăn phần tử giả kích hoạt di chuột?

Question

Nếu tôi có đánh dấu:

<div class="a b"></div> 

nơi lớp .a có một lớp di chuột liên kết với nó

và lớp .b có một yếu tố giả liên kết với nó ... như vậy:

div 
{ 
    width: 100px; 
    height: 100px; 
} 
.a { background: red; display: inline-block; } 
.a:hover { background: green; } 

.b:after 
{ 
    content: ''; 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    margin-left: 100px; 
    background: pink; 
} 

Có thể sử dụng css để ngăn phần tử giả kích hoạt tính năng di chuột của lớp hay không.

FIDDLE

Answer 1

Các css sau hiện các trick cho trình duyệt hiện đại (not IE10-):

.b:after { 
    pointer-events: none; 
} 

pointer-events: none cho phép các yếu tố để không nhận di chuột/nhấp sự kiện.

Xem this fiddle.

---

Thận trọng

pointer-events hỗ trợ cho các yếu tố phi SVG là trong tình trạng đầu tương đối. developer.mozilla.org mang đến cho bạn những cảnh báo sau đây:

Việc sử dụng con trỏ-sự kiện trong CSS cho các yếu tố phi SVG là thực nghiệm. Tính năng được sử dụng làm một phần của bản phác thảo giao diện người dùng CSS3 nhưng do nhiều sự cố mở, đã bị hoãn lại CSS4.

Giải thích mô hình hộp của Chrome display: inline-block gây nhấp nháy trong the above fiddle.
Nếu bạn chuyển sang display: block thay vào đó, bạn sẽ nhận được cách giải thích thích hợp của hộp.
Firefox không có vấn đề này.
Để đảm bảo phù hợp mô hình hộp giải thích, sử dụng như sau:

.b:after { 
    pointer-events: none; 
    display: block; 
} 

Xem this fiddle trong Chrome để xem hiệu ứng nhấp nháy.