Phần tử CSS3 có Độ mờ: 0 (ẩn) phản hồi sự kiện chuột

Question

CSS3 sử dụng Webkit trong Safari; Tôi có một nút mà, khi được nhấp, gây ra một div mờ dần. Đó div chỉ là một hình chữ nhật lớn đầy và nó có một vài nút trong đó, một trong số đócó cùng một div để phai mờ.

Vấn đề là: Khi phần tử đã mờ dần (độ mờ: 0) và tôi nhấp vào vị trí một trong các nút, onClick vẫn đang được kích hoạt. Trong các từ khác, mặc dù không thể nhìn thấy nút (độ mờ: 0) nó vẫn ở đó và là một phần của mô hình sự kiện. Tôi không muốn điều đó.

Các nút gọi các chức năng sau:

// This displays the overlay (popup) 
function showCategoryPopup() { 

// Was playing with the following, but with no success. 
// popupCategory.style.display = "block"; 
// popupCategory.style.visibility = "visible"; 

// Change the attributes that will be animated. 
popupCategory.style.opacity = 1; 
popupCategory.style.webkitTransform = "scale(1.0)"; 
} 

function hideCategoryPopup() { 
// Change the animated attributes 
popupCategory.style.opacity = 0; 
popupCategory.style.webkitTransform = "scale(0.7)"; 


// Even if opacity is 0, we still get mouse events. So, make it hidden? 
// popupCategory.style.visibility = "hidden"; 
// popupCategory.style.display = "none";  

}

Các lớp CSS cho lớp phủ là thế này:

.popupContainer { 
    opacity: 0; 
    -webkit-transform: scale(0.7); 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease-in-out; 
    -webkit-transition-delay: initial; 
} 

Nếu tôi không sử dụng các thiết lập hiển thị hoặc hiển thị ở tất cả, các hình ảnh động là tốt, nhưng các sự kiện mouseClick được kích hoạt cho các mục vô hình.

Nếu tôi sử dụng các khối, sau đó nó bật/tắt mà không có hoạt ảnh.

Nếu tôi sử dụng kiểu hiển thị thì nó hoạt động nhưng thay vì hiển thị hình động ngay lập tức, nó chỉ kích hoạt khi một số sự kiện khác trong trang được kích hoạt, giống như một nút khác ở trên trang.

Tôi nghĩ có thể thêm "con trỏ-sự kiện: không" vào kiểu được sử dụng bởi div cửa sổ bật lên sau khi bị ẩn, nhưng những gì tôi yêu cầu có vẻ giống như thứ bạn thường gặp phải với độ mờ phải là một vấn đề bán thường xuyên.

Suy nghĩ?

Answer 1

Nếu bạn đang đặt div để có độ mờ là 0, bạn vẫn có thể tương tác với mục "ẩn". Thay vào đó, bạn muốn đặt thành display:none. Bạn có thể làm cả hai, cho phép div mờ dần về 0 và sau đó gắn trên display:none khi hoạt ảnh đã kết thúc.

Answer 2

Giải pháp sạch (er?) Cho sự cố bạn đang gặp phải - đó là vấn đề phổ biến cho những thứ như chú giải công cụ và cửa sổ bật lên có hiệu ứng 'mờ dần' - không chỉ chuyển đổi giữa độ mờ đục mà còn thuộc tính "hiển thị". Không giống như 'hiển thị', 'khả năng hiển thị' là thuộc tính có thể hoạt hình thực, và nó sẽ làm điều đúng ở chỗ nó làm cho phần tử ẩn (và không đáp ứng với các sự kiện đầu vào) chỉ trước khi quá trình chuyển đổi bắt đầu và chỉ sau khi chuyển đổi trở lại trạng thái ban đầu.

Câu trả lời được đưa ra trước đó không hoạt động, nhưng phụ thuộc vào JavaScript để thao tác các thuộc tính có thể ít mong muốn hơn. Bằng cách thực hiện tất cả điều này thông qua CSS thuần túy, JavaScript của bạn không phải làm gì ngoài việc đặt và bỏ đặt một lớp trên phần tử cần được hiển thị. Nếu bạn đang tạo một chú giải công cụ, nó có thể được thực hiện mà không cần bất kỳ JS nào bằng cách đặt chú giải công cụ thành phần tử con và sử dụng bộ chọn giả 'di chuột' trên phần tử cha.

Vì vậy, đối với một popup kích hoạt bằng cách nhấp vào một cái gì đó, bạn sẽ phong cách nó như vậy:

#popup 
{ 
    /* ...cosmetic styling, positioning etc... */ 

    -webkit-transition: all 0.2s ease-in-out 0s; 
    -moz-transition: all 0.2s ease-in-out 0s; 
    -ms-transition: all 0.2s ease-in-out 0s; 
    transition: all 0.2s ease-in-out 0s; 

    opacity: 0; 
    visibility: hidden; 
} 

#popup.shown 
{ 
    opacity: 1; 
    visibility: visible; 
} 

Sau đó, JavaScript có thể dễ dàng chuyển đổi các lớp "hiển thị".

Một ví dụ sống: http://jsfiddle.net/y33cR/2/

Answer 3

gì bạn có thể làm là tắt nút trong khi opacity được đặt thành 0 với phong cách sau:

pointer-events: none; 
cursor: default; 

Bằng cách này họ không thể nhấp và con trỏ không thay đổi khi nó di chuyển qua vị trí của nút. Tôi cần một giải pháp CSS duy nhất và điều này làm việc cho tôi.