jQueryUI 可拖动禁用“z-index”值 < 0 的元素的 mouseover/mouseout 事件答案

【问题标题】：jQueryUI draggable disables mouseover/mouseout events for elements with "z-index" values < 0jQueryUI 可拖动禁用“z-index”值 < 0 的元素的 mouseover/mouseout 事件
【发布时间】：2013-11-07 09:48:47
【问题描述】：

如果 jQuery UI 可拖动元素 (#box1) 被拖动到 z-index 设置为 -1 或更低的元素 (#box2) 上，则不会触发 mouseover 和 mouseout 事件。当 z-index 设置为 0 或更高时，它们会触发。

CSS：

#box1 {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}

#box2 {
    position: absolute;
    top: 100px;
    left: 300px;
    width: 100px;
    height: 100px;
    border: 1px solid red;
    z-index: -1;
}

JavaScript：

$(function() {
        $("#box1").draggable();

        $("#box2").mouseover(function(e) {
            $("#box2").css({
                backgroundColor: "green"
            });
        });
        $("#box2").mouseout(function(e) {
            $("#box2").css({
                backgroundColor: "transparent"
            });
        });
});

见：http://jsfiddle.net/TTwPj/11/

无需拖动 mouseover 和 mouseout 即可使用所有 z-index-values。

这种行为是有原因的还是一个错误？

【问题讨论】：

哪个浏览器有这个问题？
Debian 下的当前 Firefox 和 Chromium。
逻辑上是正确的，另一个元素的元素顶部将聚焦于用户，底部不会聚焦于用户。如果您需要使用底部元素，则必须从那里移动顶部元素。注意：不要在负值中使用 z 索引。
为什么不在 z-index 中使用负值？ w3schools 明确表示这没关系。
在大多数情况下，负值会使元素低于 body 和 html 元素。在您的情况下，您需要堆叠元素，因此最好使用正 z-index 值。

标签： jquery-ui draggable mouseover mouseout

【解决方案1】：

这个“问题”与 z-index 的负值或正值无关。在这个更新的小提琴中：http://jsfiddle.net/TTwPj/23/

#box1 {
    z-index: 2;
}

#box2 {
    z-index: 1;
}

你可以看到我设置了一些正值，鼠标悬停仍然没有触发。这就是 z-index 的工作原理。

如果您想在拖动可放置元素时实现鼠标悬停，您可以使用可放置事件：

over: function( event, ui ) {}

添加一个 CSS 类或样式以显示一些可见的“鼠标悬停”效果。

【讨论】：