如何获取覆盖div下元素的鼠标悬停事件答案

【问题标题】：How to get mouseover event of an element under an overlayed div如何获取覆盖div下元素的鼠标悬停事件
【发布时间】：2013-02-12 10:48:10
【问题描述】：

我有四个 div 元素，当鼠标悬停时，选定的 div 将被放大。但是我需要获得其余三个底层 div 的 mouseover 事件，即使另一个被覆盖，这样我就可以使较早的一个不缩放并且当前悬停的一个缩放。

请考虑我的小提琴：http://jsfiddle.net/aniprasanth/7jFGH/1/

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>

CSS 是这样的：

#main_right #main_window {
height: 320px;
width: 460px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
position: relative;

}
.multi-window {
height: 150px;
width: 218px;
float: left;
margin-right: 11px;
margin-bottom: 10px;
cursor: pointer;
}
.zoomer {
height: 140px;
width: 208px;
cursor:pointer;
}
.zoom {
height: 301px;
width: 450px;
float:none;
margin:0px;
cursor:pointer;
position:absolute;
left:0;
top:0;
background-color:#FFF;
}
.multi-window img {
width:100% !important;
height:100% !important;
}

最后是脚本：

$('.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'); 


                });
        });

【问题讨论】：

和z-index，example一起玩
虽然不容易，但这可能会对你有所帮助stackoverflow.com/questions/3015422/…
这不是有点反直觉吗？当您将鼠标悬停在一个图像上并且它出现在其他图像之上时，您并不真正期望当您在该新图像中移动鼠标时该图像会发生变化。最好将图像显示为相对于光标位置的工具提示（各种），这样当您将鼠标悬停在图像上时，它会相对于光标出现 - 最终当您将鼠标悬停在图像之外时，它不再显示.

标签： javascript jquery html css

【解决方案1】：

将此 CSS 属性用于覆盖 Div。

pointer-events: none

这将禁用该 div 上的所有点击事件，并将所有点击事件传递到其下方的图层。

【讨论】：

这个在一定程度上是可以的，但是 IE 不支持这个，所以我们需要一些解决方法。