Tôi có thể làm cho phần tử ẩn đối với người di chuyển không?

Question

Tôi có một div có một loại hiệu ứng starburst (nền png trong suốt) mà tôi muốn phủ lên trên một loạt các imgs khi chúng được lơ lửng; Tôi phải làm cho div lớn để chứa hình ảnh, nhưng sau đó nó được trong cách phát hiện những con dao trên hình ảnh. (Tôi có tất cả dưới dạng hình nền vì vậy họ đang nạp thông qua một độ phân giải cao mediaquery css)

Mỗi 'image' là một loạt các yếu tố trông giống như này ngay bây giờ:

<div class="section"> 
    <div class="starburst"></div> 
    <a href="link"> 
     div class="image"> 
      <div class="non-hover"></div> 
      <div class="hover"></div> 
     </div> 
     <p>Caption</p> 
    </a> 
</div> 

JS là như thế này

$('.section a').hover(
    function() { 
     $('.speaker .hover').hide(); 
     $(this).find('.non-hover').addClass('focus'); 
     $(this).find('.hover').stop().show().animate({opacity:1.0}, 1000); 
    }, 
    function() { 
     $(this).find('.hover').stop().animate({opacity:0.0}, 0); 
     $(this).find('.non-hover').removeClass('focus'); 
    } 
); 

câu hỏi của tôi là nơi để đặt các .starbursts, làm thế nào để đối phó với họ để họ ở phía trước, với hình ảnh bg mình phía trên cùng của hình ảnh bay lượn, nhưng không nhận được trong cách lơ lửng về họ. Tôi không chắc chắn điều này là có thể, nhưng hy vọng có một cách. Làm cho chúng tách biệt vì tôi muốn làm chúng sinh động một cách khác biệt.

Answer 1

Bạn có thể sử dụng CSS pointer-events tài sản:

Thuộc tính CSS con trỏ-sự kiện cho phép tác giả để kiểm soát trong hoàn cảnh nào (nếu có) một yếu tố đồ họa cụ thể có thể trở thành mục tiêu của các sự kiện chuột.

.starbursts { 
    pointer-events: none 
}