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

Question

好的，所以我有一个包含在其父项中的可拖动元素。我试图在拖动时添加自定义光标，包括当光标离开可拖动元素本身时。然后当拖动停止时，在 mouseup 上，光标应该 return 到 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 class已被移除，光标仍然卡在自定义光标处。如果我在可拖动的 start 和 stop 事件上添加 .customcursor class 而不是在 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;
}

此外，由于某些原因，即使在删除 class 之后，光标仍作为直接 style 留在后面。使用 JavaScript 或 jQuery 删除它：

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

Fiddle: https://jsfiddle.net/ntyuuqq2/

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

Issues using custom cursor with draggable element

html

javascript

css

jquery

cursor