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

Question

如果将 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。

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

Answer 1

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

#box1 {
    z-index: 2;
}

#box2 {
    z-index: 1;
}

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

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

over: function( event, ui ) {}

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