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

Question

我遇到了与此 link 相关的类似问题：

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

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

对于这种特殊情况，最简单的 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>

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

Answer 2

嗯，这很有趣。无论哪种方式，触发 body 光标的变化似乎在 Chrome v42:

中起到了作用

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

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

}, 5000);