I've been following a course on Pluralsight about creating web apps using .NET Core. The instructor uses jQuery version 2.4.3, but I decided to use the latest jQuery version 3.x.
I copied the code exactly as shown in the course:
(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", "");
});
})();
However, when I tried mousing over my div, nothing happened. No color change, no response at all. After some investigation, I realized that I should probably do it this way instead:
(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", "");
});
})();
Even though "enter" and "out" are printed in the console, the background color of my div still doesn't change.
What am I missing here?