Có phải: không (: di chuột) và: di chuột một cách an toàn để ẩn các yếu tố có thể truy cập?

Question

Đôi khi có vẻ hữu ích khi làm cho các yếu tố trang nhất định chỉ hiển thị trên v.d. dao động. Một ví dụ là "phản hồi" của stackoverflow - Bài đăng này có hữu ích cho bạn không? "- tiện ích con. Vì những yếu tố đó có thể rất quan trọng đối với giao diện, nên tính năng hiển thị trên di chuột như vậy phải là một sự tăng cường tiến bộ hoặc, về mặt khác, không phô trương và làm suy giảm một cách duyên dáng.

Cách thông thường dường như đang sử dụng javascript, ví dụ: ẩn các phần tử và làm cho chúng khả dụng khi một phần tử cha được di chuột. Lý do cho lựa chọn đó có thể là :hover không hỗ trợ tất cả các thành phần đặc biệt trong các trình duyệt cũ, do đó ngăn cấm bạn ẩn các phần tử ở vị trí đầu tiên lên tới css2. (Đối với js/jQuery dụ x jquery showing elements on hover)

Tôi tự hỏi nếu bạn có thể đạt được một tính năng an toàn * với css3 tinh khiết, sử dụng :not(:hover) và :hover, không ảnh hưởng đến trình duyệt cũ. Theo như tôi thấy, yêu cầu là mọi trình duyệt hỗ trợ :not() phải hỗ trợ :hover cho tất cả các yếu tố. Theo các nguồn sau đây, đó dường như là trường hợp

• http://www.quirksmode.org/css/contents.html
• http://kimblim.dk/css-tests/selectors/

thực hiện Ví dụ: http://jsfiddle.net/LGQMJ/

Bạn nghĩ gì? Bất kỳ phản đối hoặc các nguồn khác?

* theo cách an toàn, tôi có nghĩa là trình duyệt phải luôn hiển thị tất cả các yếu tố như là phương sách cuối cùng.

Answer 1

Giải pháp của bạn có vẻ ổn cho CSS3. Không có bất cứ điều gì tôi có thể nghĩ đến để cải thiện giải pháp của bạn cho các trình duyệt hiện đại vì thuộc tính opacity sẽ không bao giờ được áp dụng bởi các trình duyệt không hỗ trợ nó.

Không có trình duyệt nào khác ngoài IE6 và NN4 (và cũ hơn) mà không hỗ trợ cho :hover trên các thành phần khác ngoài a. Như ngụ ý trong câu hỏi của bạn, tất cả các trình duyệt hỗ trợ :not() cũng được hỗ trợ đầy đủ :hover.

Điều đó nói rằng, bạn kết thúc rời khỏi IE7 và IE8 bỏ lỡ hiệu ứng di chuột qua, thứ hai trong số đó vẫn còn khá phổ biến.có lẽ bạn đang tìm cách để hỗ trợ IE6 là tốt, nhưng đây là một giải pháp mà tôi tin rằng sẽ giải quyết những mối quan tâm, nếu bạn cần nó:

1. Bỏ qua :not(:hover) hoàn toàn nên chọn đầu tiên của bạn trở nên ít cụ thể hơn không kém phần đặc trưng cho chọn của bạn thứ hai với :hover, và bạn có thể tiếp cận với IE7 và IE8 mà không hỗ trợ :not() nhưng làm hỗ trợ :hover trên tất cả các yếu tố thị giác:

   div span.question { 
       opacity: 0; 
   } 
   div:hover span.question { 
       opacity: 1; 
   } 
   

2. Sử dụng visibility tài sản thay vì opacity tài sản để tiếp cận với IE7 và IE8 mà không hỗ trợ CSS3 opacity:

   div span.question { 
       visibility: hidden; 
   } 
   div:hover span.question { 
       visibility: visible; 
   } 
   

   Hãy ghi nhớ rằng visibility: hidden sẽ làm cho một yếu tố vô hình để di chuột là tốt, nhưng trong trường hợp này, bạn' áp dụng lại cho phần tử con, vì vậy, cha mẹ sẽ vẫn hiển thị với các con chuột.

3. Sử dụng CSS2/3 combinators rằng IE6 không hỗ trợ nhưng IE7 và IE8 làm (con >, tiếp giáp với anh chị em +, chung anh chị em ~) để ẩn cả hai quy tắc từ IE6. Đây giáp "hacky", nhưng tình hình của bạn là một trong những nơi mà các con combinator > phù hợp rất tốt, vì vậy nó có thể được tích hợp hữu cơ chứ không phải bị hack trong như html > body lọc nổi tiếng:

   div > span.question { 
       visibility: hidden; 
   } 
   div:hover > span.question { 
       visibility: visible; 
   } 
   

Updated fiddle