移動鼠標時更改光標

Question

在移動/拖動鼠標時嘗試在元素上放置“移動”類時遇到一個奇怪的錯誤。 我在Chrome 59.0.3071.115上使用jQuery 3.1.1。

我將問題簡化為以下示例：

<html>
<head>
<style>
    .thing {
        display: block;
        width: 10em;
        height: 10em;
        background: green;
    }
    .moving {
        cursor: move;
    }
</style>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="thing"></div>
<script>
    $(document).ready(function(){
        var $thing = $('.thing');
        $thing.on('mousedown', function(e){
            $thing.addClass("moving");
            console.log("mousedown");
        }).on('mouseup', function(e){
            $thing.removeClass("moving");
            console.log("mouseup");
        });
    });
</script>
</body>
</html>

這將在頁面中顯示一個綠色框，並在您的鼠標上下移動時觸發事件。

發生什么事了

點擊綠色框-“移動”類將應用於div （可在Chrome開發者工具：元素標簽中看到），但光標停留在通常的箭頭上。 我希望光標更改為move光標。
在按住點擊的同時，拖動一點-光標仍然保持默認箭頭。
在綠色div上釋放單擊-光標會暫時切換到move光標，但是如果完全移動鼠標，則會切換回默認箭頭。

我已經嘗試過https://stackoverflow.com/a/16172027/1766230之類的解決方案，還有其他運氣不佳的解決方案。 我在CSS，各種元素等中嘗試了選擇器的各種組合。奇怪的是，在jsfiddle中嘗試此操作時，一切正常，但是使用作為獨立HTML文件的內容，我看到了錯誤。

編輯

原來這一定是瀏覽器錯誤，因為當我關閉Chrome並重新打開它時，它開始按預期運行。 有人知道Chrome中的這種錯誤嗎？

Answer 1

只是一種選擇 ：（ 不帶JS）

使用tabindex
選擇器是:active:hover

 .thing { display: block; width: 10em; height: 10em; background: green; user-select: none; outline: none; } .thing:active:hover { cursor: move; background: red; }

 <div class="thing" tabindex="1"></div>

Answer 2

drag != mousedown

它是瀏覽器的默認拖動行為。使用mousedown drag事件

 $(document).ready(function() { var $thing = $('.thing'); $thing.on('mousedown ,drag', function(e) { $thing.addClass("moving"); console.log("mousedown"); }).on('mouseup', function(e) { $thing.removeClass("moving"); console.log("mouseup"); }); });

 .thing { display: block; width: 10em; height: 10em; background: green; } .moving { cursor: move; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="thing"></div>

移動鼠標時更改光標

問題描述

編輯

2 個解決方案

解決方案1
1 2017-07-14 10:16:50

解決方案2
0 2017-07-14 05:11:28

移動鼠標時更改光標

問題描述

編輯

2 個解決方案

解決方案1 1 2017-07-14 10:16:50

解決方案2 0 2017-07-14 05:11:28

解決方案1
1 2017-07-14 10:16:50

解決方案2
0 2017-07-14 05:11:28