Question

好的，所以我有一个可拖动的元素，它包含在它的父级中。我试图在拖动时添加自定义光标，包括当光标移出可拖动元素本身时。然后当拖动停止时，在mouseup上，光标应返回default。

<div id="container">
    <div class="draggable"></div>
</div>

$(document).ready(function() {

    $(window).on("mouseup", function() {
        $("*").removeClass("customcursor");   
    })

    $(".draggable").on("mousedown", function() {
        $("*").addClass("customcursor");
    })

    $(".draggable").draggable({
        containment: "parent",
    });
});

html {
    background: lightblue;
}

body {
    background-color: teal;
}

#container {
    height: 400px;
    width: 400px;
    background-color: black;
}

.draggable {
    height: 200px;
    width: 200px;
    background-color: red;
}

.customcursor {
    cursor: url(http://media.fluke.com/images/8-icon-30x30.gif), default;
}

这是一个有效的fiddle。

然而，这给了我两个问题。

第一个问题：拖动时，当光标移动到body元素时，自定义光标不再有效。但是，当光标移动到html元素时，自定义光标确实有效。不可否认，这可以通过添加一个包装元素来解决，因此光标永远不会出现在body上，但我仍然对为什么会发生这种情况感到困惑。

第二个问题：第一次拖动后，即使.customcursor类已被删除，光标也会被自定义光标卡住。如果我在可拖动的.customcursor和start事件而非stop和mousedown上添加mouseup课程，则可以解决第二个问题，但我想要即使可拖动的移动，mousedown上的自定义光标也会移动。

如果有人对这些问题发生的原因或解决问题的方法有所了解，我真的很感激帮助。

Answer 1

将!important添加到cursor更改：

.customcursor {
    cursor: url(http://media.fluke.com/images/8-icon-30x30.gif), default !important;
}

身体因直接元素风格而被覆盖：

element.style {
    cursor: auto;
}

此外，由于某种原因，即使在删除类之后，光标也会被留下作为直接style。用JavaScript或jQuery删除它：

$(window).on("mouseup", function() {
    $("*").removeClass("customcursor");
    //document.body.style.cursor = "";
    $("body").css("cursor", "")
    console.log("mouseup");
})

小提琴：https://jsfiddle.net/ntyuuqq2/

使用带有可拖动元素的自定义光标的问题

1 个答案: