Czy: nie (: hover) i: najedź na bezpieczny sposób, aby ukryć dostępne elementy?

Question

Czasami pomocne wydaje się, aby niektóre elementy strony były widoczne tylko na przykładach. unosi się. Przykładem jest "feedback" Stackoverflow - czy ten post był dla Ciebie przydatny? - widget. Ponieważ te elementy mogą mieć kluczowe znaczenie dla interfejsu, taka funkcja "pokaz-na-najechaniu" powinna być postępowym ulepszeniem lub, innymi słowy, dyskretnym i poniżającym z gracją.

Zwykle wydaje się, że stosuje się javascript, np. ukrywanie elementów i udostępnianie ich, gdy element nadrzędny jest zawieszony. Powodem tego wyboru może być :hover nie obsługuje wszystkich elementów, szczególnie w starszych przeglądarkach, tym samym zabraniając ukrywania elementów w pierwszej kolejności aż do css2. (Na przykład jQuery js/por jquery showing elements on hover)

Zastanawiam się, czy można osiągnąć taką funkcję bezpiecznie * czystą CSS3, używając :not(:hover) i :hover, nie wpływając starszych przeglądarek. O ile widzę, wymóg jest taki, że każda przeglądarka obsługująca :not() musi obsługiwać :hover dla wszystkich elementów. Zgodnie z następujących źródeł, który pojawia się w przypadku

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

Przykład wdrożenia: http://jsfiddle.net/LGQMJ/

Co o tym sądzisz? Wszelkie zastrzeżenia lub inne źródła?

* bezpiecznie oznacza, że ​​przeglądarka powinna zawsze pokazywać wszystkie elementy jako ostateczność.

Answer 1

Twoje rozwiązanie wygląda dobrze w CSS3. Nie ma nic lepszego do rozwiązania dla nowoczesnych przeglądarek, ponieważ właściwość opacity nigdy nie zostanie zastosowana przez przeglądarki, które i tak jej nie obsługują.

Nie ma dosłownie żadnej innej przeglądarki oprócz IE6 i NN4 (i starszych) bez wsparcia dla :hover na elementach innych niż a. Zgodnie z Twoim pytaniem, wszystkie przeglądarki obsługujące :not() są również w pełni obsługiwane pod numerem :hover.

To powiedziawszy, skończysz pozostawiając IE7 i IE8, które nie mają wpływu na efekt unoszący się, ten drugi z nich jest wciąż dość rozpowszechniony.Pewnie chce wspierać IE6 jak dobrze, ale tutaj jest to rozwiązanie, które wierzę, że rozwiązanie tych problemów, jeśli jest to potrzebne:

1. Omit :not(:hover) sumie więc pierwszy selektor staje się mniej konkretne niż równie specyficzne Twój drugi selektor z :hover, i można dotrzeć do IE7 i IE8, które nie obsługują :not() ale obsługują :hover wszystkich elementów wizualnych:

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

2. Użyj visibility nieruchomość zamiast nieruchomości opacity dotrzeć do IE7 i IE8, które nie obsługują CSS3 opacity:

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

   Należy pamiętać, że visibility: hidden uczynią elementem niewidoczne mouseovers jak dobrze, ale w tym przypadku” ponownie zastosować go do elementu podrzędnego, tak aby rodzic pozostał widoczny dla myszy.

3. Zastosowanie CSS2/3 kombinatorów że IE6 nie obsługuje ale IE7 i IE8 turystyczne (Child >, w sąsiedztwie rodzeństwo +, ogólnie rodzeństwo ~), aby ukryć zarówno zasady z IE6. To graniczy z „hacky”, ale sytuacja jest jednym gdzie syntezatora dziecko > pasuje bardzo dobrze, więc to może być zintegrowany organicznie zamiast włamał się jak słynny html > body Filtr:

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

Updated fiddle