как активировать фоновый элемент div?

Question

у меня есть два элемента div, box_1 и box_2:

<div id="box_1" style="position:absolute;top:0;left:0;width:500px;height:500px;border:1px solid gray;z-index:2;">
</div>

<div id="box_2" onclick="alert(1);" style="position:absolute;top:0;left:0;width:300px;height:300px;background-color:red;z-index:1;">
how to activate me?(do not inner #box_1,and z-index less than box_1)
</div>

проверить >>> >>> 1004 * демо

как активировать box_2? (не внутренний # box_1, а z-index меньше, чем box_1)

активировать == показывать предупреждение (1) при нажатии box_2

спасибо:)

Answer 1

Я не до конца понимаю ваш вопрос. То, как у вас эти стилизованные блоки, единственный способ заставить кликнуть <div> - присвоить ему значение z-index больше 2.

Кроме того, вы можете присвоить other <div> значение z-index меньше 1 или скрыть его.

Если вы не можете изменить разметку, то единственное, что вы можете сделать, это перехватить события в верхней части <div> и перенаправить их на скрытую <div>. Это довольно просто с jQuery & mdash; просто добавьте обработчики в верхнюю часть <div> и используйте «.trigger» для пересылки событий.

изменить & mdash; как это может быть:

$('#box_1').click(function() {
  $('#box_2').trigger('click');
  return false;
});

Теперь это будет отлавливать события со всех концов <div>. Вы можете проверить координаты мыши события, чтобы увидеть, находятся ли они в нижней части <div>, прежде чем вызывать событие.

Answer 2

Вы сделали все правильно, но box_1 прозрачен, поэтому box_2 просвечивает. Если вы укажете box_1 цвет фона, такой как синий, вы увидите, что он появляется сверху.

<div style=";width:500px;height:500px;border:1px solid gray;z-index:2;background:blue;" id="box_1">
</div>

<div style="width:300px;height:300px;background-color:red;z-index:1;" id="box_2" onclick="alert(1);">
how to activate me?(do not inner #box_1,and z-index less than box_1)
</div>