Элемент, “прозрачный” для мыши

#html #css #javascript

Всем привет. Странный вопрос - есть ли возможность сделать элемент "невидимым" для мыши?
Поясню, есть блок 
, в нем  с абсолютным позиционированием. <А> может быть
больше или меньше, длиннее или шире 
, не важно; нужно, чтобы мышь вообще не замечала
этот . 
Фиддл, красные квадраты - курсор должен быть normal(и клик уходит на  либо
то, что ниже), зеленые - pointer (и клик уходит на 
); text'а быть вообще не должно.
Итак, возможно ли и если да, то как?
В 
 могут быть и другие элементы, "поставить прозрачную копию поверх " рассматриваю
в последнюю очередь, желательно работать только с . Возможно JS (не jQuery)
PS Ноу, ноу хакерз, нужна некликабельная метка на карту, произвольных размеров, которая
может залезать на другие регионы и не накрывать их.
UPD: для непонимающих) Нужно сделать так, чтобы элемент (div, a - не важно) отображался,
но для мыши не существовал: клики проходят насквозь, события onmouse* не происходят,
курсор не изменяется. А в фиддле (выше) красные и зеленые квадраты - это положения
мыши и реакция на них. 
Теперь лучше?
UPD примерно так оно должно себя вести, но без слоев #overlay1/2.    

Ответы

Ответ 1

Похожая задача разрешилась при использовании:

pointer-events: none;


Ответ 2

Ну что, решил сам. Спасибо, к сожалению, сказать некому)

Таки пришлось попользовать jQuery из-за ленивости перепиливания $.trigger и $.css. 

Решение (fiddle)

Алгоритм примерно такой:


вешаем на ссылку все мышиные события
в их обработчике скрываем ссылку, получаем нижний элемент с помощью божественной
функции document.elementFromPoint и перекидываем событие на него
копируем в ссылку стиль курсора нижнего элемента (если он auto - ставим default)
показываем ссылку
обрываем событие ссылки
профит, как говорится


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

ЗЫ: если заморачиваться - курсор надо выставлять в зависимости от типа нижнего элемента
- pointer для ссылки, text для текстовых полей и т.д. Но мне, честно, просто было лень,
свою задачу я решил)

Дублирую fiddle, вариант для изучения



function passEventLower(e) {
  e.preventDefault();
  e.stopPropagation();
  var $el = $(document.elementFromPoint(e.pageX, e.pageY));
  var c = $el.css('cursor') || 'default';
  if (c == 'auto')
    c = 'default';
  $(e.target).css('cursor', c);
  $el.trigger(e.type);
}
$('html *:not(#a1)').on('click', function(e) {
  console.log(this.tagName, e.type);
});
$('#a1').on('mousedown mouseup click mousemove', function(e) {
  var $a = $(this);
  $a.hide();
  passEventLower(e);
  $a.show();
  return false;
});
#d1 {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #eee;
  cursor: pointer;
  overflow: show;
}

#a1 {
  display;
  block;
  position: absolute;
  white-space: nowrap;
  line-height: 30px;
  margin: 30px 0px 0px 10px;
  cursor: default;
}


  some text some text some text