0

如何使用 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)";
        }

    }
4

1 回答 1

2

假设您使用 html5 样板中的条件注释，您可以定义这种样式（请注意新浏览器的不同语法 - 请参阅MDN 文档以获取更多信息）：

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 规则。此外，您将完全远离 javascript 的 css，因此您的 javascript 具有更好的可维护性。

于 2013-04-18T08:18:24.377 回答