Chrome 移动鼠标时更改光标

yx2lnoni 于 12个月前发布在 Go

关注(0)|答案(4)|浏览(168)

我在移动/拖动鼠标时尝试在元素上放置“moving”类时遇到了一个奇怪的错误。我在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>

字符串
这将在页面中显示一个绿色框，并在鼠标按下和鼠标抬起时触发事件。
实际上...
1.点击绿色框--“moving”类被应用到div（这可以在Chrome开发者工具：元素选项卡中看到），但光标保持通常的箭头。我希望光标变成move光标。
1.在按住单击键的同时，稍微拖动一点--光标仍保持默认箭头。
1.在绿色div上释放单击--光标暂时切换到move光标，但如果鼠标移动，则切换回默认箭头。
我尝试过像https://stackoverflow.com/a/16172027/1766230和其他解决方案，没有运气。我尝试过CSS中选择器的各种组合，各种元素等。奇怪的是，当在jsfiddle中尝试时，一切都正常，但将此内容作为独立的HTML文件时，我看到了错误。

编辑

原来这一定是一个浏览器错误，因为当我关闭Chrome并重新打开它时，它开始按预期工作。有人知道Chrome中的这种错误吗？

google-chrome

来源：https://stackoverflow.com/questions/45094970/change-cursor-while-moving-mouse

4条答案

按热度按时间

xqk2d5yq1#

只是一个替代选项：（不带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;
}

个字符

赞(0）回复(0）举报 12个月前

kkbh8khc2#

drag != mousedown

字符串
这是浏览器默认的拖动行为。

$(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>

赞(0）回复(0）举报 12个月前

ycl3bljg3#

发现这一贡献，因为我遇到了同样的问题，如上所述-但同时使用标准JavaScript而不是jquery.现在-超过六年后，最初的职位和Chrome版本120 -解决方案仍然是相同的：关闭浏览器并重新启动它-问题就消失了。只需重新加载页面（有或没有清除该高速缓存）没有帮助-你真的必须重新启动Chrome。所以这个错误显然仍然在代码中-只是作为信息，如果其他人有同样的问题.

赞(0）回复(0）举报 12个月前

41zrol4v4#

$(document).ready(function() {
    // Add a mousemove event listener to the document
    $(document).on('mousemove', function(event) {
      // Change the cursor style to 'pointer'
      $('body').css('cursor', 'pointer');

      // Additional logic can be added based on the mouse position or other conditions
      // For example, change cursor to 'default' when not over a specific area
      // if (event.clientX < 100 || event.clientY < 100) {
      //   $('body').css('cursor', 'default');
      // }
    });

字符串
在这个例子中，当鼠标移动时，光标样式被更改为'pointer'。您可以通过将'pointer'替换为其他有效的CSS光标值（如'default'，'pointer'等）来自定义光标样式。

赞(0）回复(0）举报 12个月前

我来回答

Chrome 移动鼠标时更改光标

编辑

4条答案

相关问题

热门标签

最新问答