Kliknij przez div z kanałem alfa

Question

Próbuję odtworzyć warstwę "zanikania" twittera na dole widgetu kanału (na stronie głównej pod adresem twitter.com).

Jedynym sposobem, w jaki mogłem wymyślić, że nie używałam html5, było umieszczenie div bezwzględnie pozycjonowanego nad div źródła i nadanie mu kanału alfa z gradientem białym do przezroczystym nad nim. To było łatwe do osiągnięcia.

Teraz tylko problem polega na tym, że elementy div znajdujące się pod przezroczystymi warstwami nie są klikalne. Każdy pomysł na temat tego, jak sprawić, aby divy były klikalne? A może masz inną metodę replikacji tego efektu w ogóle?

Dzięki!

Answer 1

W tym artykule opisano jedną metodę przechwytywania zdarzenia onclick i posługiwania się nim przez chwilowe ukrycie nakładki, odświeżenie kliknięcia, a następnie ponowne jego ukrycie. Ukrywanie nie powinno być widoczne dla użytkownika końcowego.

Forwarding Mouse Events Through Layers:

1. textarea (mój Element maskujący), który znajduje się nad siatka odbiera mouseover, mouseMove, mousedown, mouseUp i innych imprez.
2. Górna warstwa maskowania jest ukryta na chwilę, , dzięki czemu możemy dowiedzieć się, który element jest pod maską w miejscu zdarzenia.
3. Zdarzenie jest ponownie uruchamiane - w tym momencie do gry wchodzi model zdarzeń W3 DOM i prostszy odpowiednik firmy Microsoft w wersji .
4. Uruchom ponownie proces - gotowe do następnego zdarzenia.

EDIT: Myślę, Twitter czy jest rzeczywiście znacznie prostsze. Istnieje własność CSS zapożyczona z SVG, którą zaimplementowała garść przeglądarek.

.overlay { pointer-events: none; } 

ten jest obecnie obsługiwana w Firefox 3.6+, Safari 4 i Google Chrome - więc jeśli jesteś szczęśliwy dla niego tylko do pracy na tych przeglądarek to jest to o wiele prostsza opcja, z dodatkową zaletę, że działa także dla zdarzeń najechania, a nie tylko zdarzeń kliknięcia.

Answer 2

dla IE, wystarczy ustawić dolny div lub layer używać negatywny indeks, na przykład:

{pointer-events: none; z-index: -100}