Question

如何使用JS或CSS动态更改div上的游标样式？因为我有多种情况...... 我试过下面的代码：

    div.addEventListener("mouseover", function(evt) {
        if (tool == "BC"){
          div.style.cursor = "url(/icons/bc.cur)";
        }
        if (tool == "pan"){
          div.style.cursor = "url(/icons/pan.cur)";
        }

    }

Answer 1

假设您正在使用html5样板中的条件注释，您可以定义此样式（请注意新浏览器的不同语法 - 有关详细信息，请参阅MDN docs）：

div.bc { cursor : url(/icons/bc.cur), auto;  }
div.pan { cursor : url(/icons/pan.cur), auto; }

/* style for IE<9 */
.lt-ie9 div.bc { cursor : url(/icons/bc.cur); }
.lt-ie9 div.pan { cursor : url(/icons/pan.cur); }

并且，为了简单起见，您的div没有应用任何类，只需更改您的js代码：

div.addEventListener("mouseover", function(evt) {
    this.className = tool.toLowerCase();
}

这种方法将确保良好的可伸缩性，因为如果你有另一个光标列表，javascript不需要进一步修改，只需添加一些新的css规则。此外，你将完全保留jss的CSS，因此你的javascript具有更好的可持续性。

动态更改光标/设置cur文件

1 个答案: