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/

无需拖动鼠标悬停和鼠标输出就可以正常使用所有z-index-values。

这种行为是否有原因或者是错误？

Answer 1

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

#box1 {
    z-index: 2;
}

#box2 {
    z-index: 1;
}

你可以看到我设置了一些正值，并且mousover仍未触发。这就是z-index的工作原理。

如果要在拖放可放置元素的同时执行鼠标悬停，可以使用droppable事件：

over: function( event, ui ) {}

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

jQueryUI draggable禁用具有“z-index”值＆lt;的元素的mouseover / mouseout事件。 0

1 个答案: