如何激活背景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>

检查它>>> 演示

如何激活box_2？ （请勿在内部＃box_1，并且z-index小于box_1）

单击框_2时激活==显示警报（1）

谢谢 ：）

Answer 1

我不完全了解您的问题。 设置这些框样式的方式，使该<div>可单击的唯一方法是为其提供大于2的“ z-index”值。

或者，您可以给另一个 <div>小于1的“ z-index”值，或将其隐藏。

如果您不能更改标记，那么您唯一可以做的就是在顶部<div>捕获事件并将它们转发到掩盖的<div> 。 使用jQuery非常简单—只需将处理程序添加到顶部<div>并使用“ .trigger”来转发事件。

编辑 -可能像这样：

$('#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>