javascript - 鼠标闲置 Vanilla javascript时强制更新Chrome光标

Question

我有一个与此链接中相关的类似问题:

https://code.google.com/p/chromium/issues/detail?id=26723

当新的 div 出现并且鼠标不移动时，Chrome 40 中的光标不会更新。Chrome 问题列出了一些解决方法，但我没有让它们与我的代码一起使用。还有一些 stackoverflow 问题列出了这个问题，但他们没有用 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 解决方法是什么？

fiddle :http://jsfiddle.net/2zh90st6/

Answer 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>

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