Javascript 如何获取叠加div下元素的mouseover事件

我有四个div元素，在鼠标上方，选定的div将被缩放。但是我需要得到剩余三个底层div的mouseover事件，即使另一个被覆盖，这样我就可以使前面的一个不缩放，而当前悬停的一个被缩放

请考虑我的小提琴：

HTML代码如下所示

<div id="main_window">
                <div class="multi-window">
                    <div class="zoomer tile">
                        <img src="images/img1.jpg" width="207" height="138" />
                    </div>
                 </div>
              <div class="multi-window">
                    <div class="zoomer tile">
                        <img src="images/img2.jpg" width="207" height="138" />
                    </div>
                 </div>
             <div class="multi-window">
                    <div class="zoomer tile">
                        <img src="images/img3.jpg" width="207" height="138" />
                    </div>
                 </div>
              <div class="multi-window">
                    <div class="zoomer tile">
                        <img src="images/img4.jpg" width="207" height="138" />
                    </div>
                 </div>
            </div>

最后是剧本：

$('.zoomer').on('mouseenter',function(e){
        $(this).addClass('zoom').removeClass('zoomer');
        $('.zoom img').css({
            'width':'100%',
            'height':'100%'
            });

            $(this).bind('mouseleave click', function(){

                $(this).removeClass('zoom').addClass('zoomer');
                $('.zoomer').removeClass('zoomer'); 


                });
        });

---

将此CSS属性用于覆盖Div

指针事件：无

---

这将禁用该div上的所有单击事件，并将所有单击事件传递到它下面的层。

玩一玩

z-index

，虽然不太容易，但这可能会帮助您，这不是有点违反直觉吗？当您将鼠标悬停在某个图像上，而该图像显示在其他图像的顶部时，当您将鼠标移动到该新图像中时，您并不期望该图像会随之改变。最好将图像显示为与光标位置相关的工具提示（排序），这样当您将鼠标悬停在图像上时，它会相对于光标显示，最终当您将鼠标悬停在图像上时，它将不再显示。在某种程度上，这一点是可以的，但IE中不支持这一点，因此我们需要解决这一问题。

$('.zoomer').on('mouseenter',function(e){
        $(this).addClass('zoom').removeClass('zoomer');
        $('.zoom img').css({
            'width':'100%',
            'height':'100%'
            });

            $(this).bind('mouseleave click', function(){

                $(this).removeClass('zoom').addClass('zoomer');
                $('.zoomer').removeClass('zoomer'); 


                });
        });