Нажмите через div с альфа-каналом

Question

Я пытаюсь скопировать слой «исчезновения» в твиттере в нижней части виджета канала (на их главной странице в twitter.com).

Единственный способ, которым я мог придумать, который не использовал html5, - это поместить абсолютный позиционный div над div подачи и дать ему альфа-канал с png с прозрачным градиентом над ним. Этого было легко достичь.

Единственная проблема сейчас заключается в том, что элементы div, которые появляются под прозрачными слоями, не активируются. Есть идеи о том, как сделать клики кликабельными? Может быть, у вас есть другой способ повторить этот эффект в целом?

Спасибо!

Answer 1

В этой статье описывается один метод захвата события onclick и его обработки путем мгновенного скрытия наложения, повторного подтверждения щелчка, а затем повторного отображения. Скрытие не должно быть видно конечному пользователю.

Пересылка событий мыши через слои :

1. Текстовая область (мой маскирующий элемент), которая расположен над сеткой получает Mouseover, Mousemove, Mousedown, mouseup и другие события.
2. Верх маскирующий слой скрыт на мгновение, так что мы можем выяснить, что это за элемент под маской в ​​месте проведения мероприятия.
3. Событие перезапущено - это где модель W3 DOM Event и более простой Эквивалент Microsoft входит в игру.
4. Запустите процесс снова - готов к следующее событие.

РЕДАКТИРОВАТЬ: Я думаю, что Twitter делает на самом деле гораздо проще. Есть свойство CSS, заимствованное из SVG, которое реализовали несколько браузеров.

.overlay { pointer-events: none; }

В настоящее время это поддерживается в Firefox 3.6+, Safari 4 и Google Chrome - поэтому, если вы довольны тем, что он работает только в этих браузерах, тогда это гораздо более простой вариант с дополнительным преимуществом, которое работает для событий при наведении тоже, а не просто клик по событиям.

Answer 2

Для IE, просто установите нижнюю div или layer, чтобы использовать отрицательный индекс, например:

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