鼠标闲置香草javascript时强制Chrome光标更新答案

【问题标题】：Force Chrome cursor update when mouse-idling vanilla javascript鼠标闲置香草javascript时强制Chrome光标更新
【发布时间】：2015-03-27 06:24:58
【问题描述】：

当新的 div 出现并且鼠标不移动时，光标不会在 Chrome 40 中更新。 Chrome 问题列出了一些解决方法，但我没有让它们与我的代码一起使用。还有一些 stackoverflow question 列出了这个问题，但他们没有用 vanilla javascript 解决这个特殊情况。

HTML：

<div id ="d">
    Hello
</div>

CSS：

div#d {
    width: 100px;
    height: 100px;
    background-color: red;
}

div.curs {
    cursor: pointer;
    height: 80px;
    background-color: grey;
}

JS：

setTimeout(function(){
    var div = document.getElementById('d');
    div.innerHTML = div.innerHTML + '<div class="curs">World</div>';    
}, 5000);

对于这种特殊情况，最简单的 vanilla javascript 解决方法是什么？

小提琴：http://jsfiddle.net/2zh90st6/

【问题讨论】：

标签： javascript css google-chrome chromium

【解决方案1】：

在 Google Chrome v42 上，您可以通过更改当前光标下元素或该元素的任何祖先的光标样式来安排光标更新。请注意，光标样式必须在新元素添加到 DOM 之后更改。

var container, overlay;

container = document.getElementById('container');

setTimeout(function() {
  overlay = document.createElement('div');
  overlay.id = 'overlay';
  container.appendChild(overlay);

  // Change container cursor from 'auto' to 'default',
  // to schedule cursor update while hovering overlay
  container.style.cursor = 'default';
}, 5000);

#container {
  position: relative;
  padding: 10px;
  cursor: auto;
  background: #7FDBFF;
  color: #001F3F;
  width: 100px;
  height: 100px;
}
#overlay {
  cursor: pointer;
  width: 100px;
  height: 100px;
  background: #001F3F;
  color: #7FDBFF;
  position: absolute;
  top: 10px;
  left: 10px;
}

<div id="container">
  Hover me and wait for a dark overlay.
</div>

您链接到的铬问题，Issue 26723: Mouse cursor doesn't change when mouse-idling，目前似乎很活跃，所以希望这种解决方法不需要很长时间。

【讨论】：

在 Chrome 67 上仍然会出现此问题。请注意，如果页面没有键盘焦点，则光标不会更新（例如，按 F12 并且光标没有更改） .其次，如果 div 在静止鼠标指针下方移动，则光标不会改变。肮脏的修复：jsbin.com/qahuqa/1 - 打开并将鼠标指针放在左上角附近：当绿色框位于鼠标指针下方时，CSS 光标会更新。现在按 F12，光标 not 更新（因为 devtools 有焦点）。在 devtools Elements 选项卡中，右键单击，删除
并且光标不会更新。

【解决方案2】：

嗯，这很有趣。无论哪种方式，触发正文光标的更改似乎都可以在 Chrome v42 中解决问题：

setTimeout(function(){
    var div = document.getElementById('d');
    div.innerHTML = div.innerHTML + '<div class="curs">World</div>';    

    document.body.style.cursor = 'default';

}, 5000);

【讨论】：