javascript - 事件发生但什么也没有发生？

Question

我正在学习这门关于使用 .NET Core 制作 Web 应用的 pluralsight 类(class)。我认为作者使用的是 jQuery 2.4.3，我自己选择了最新的 jQuery 3.x。

所以我写的代码和他一模一样:

(function () {
    var ele = $("#userName");
    ele.text("Some Dude");

    var main = $("#main");
    main.on("mouseenter", function () {
        main.css("background-color", "#888;");
    });
    main.on("mouseleave", function () {
        main.css("background-color", "");
    });
})();

当我将鼠标悬停在我的 div 上时，起初没有任何反应。它不会改变颜色。似乎什么都没有登记。所以我去打猎，我发现我应该这样做:

(function () {
    var ele = $("#userName");
    ele.text("Some Dude");

    var main = $("#main");
    main.on("mouseover", function () {
        console.log("enter");
        main.css("background-color", "#888;");
    })
    .on("mouseout", function () {
        console.log("out");
        main.css("background-color", "");
    });
})();

虽然控制台打印出“enter”和“out”，但我的 div 的背景颜色仍然没有改变。

我错过了什么？

Answer 1

也许删除“;”在 main.css("background-color", "#888;")

中