鼠标闲置的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解决方法是什么？

小提琴：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>

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

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