Alex Bariyev Alex Bariyev - 6 months ago 27
Javascript Question

Facing issue with Mouse Event

I am new to web development, so I am taking a Pluralsight course called "Building a Web App with ASP.NET Core RC1, MVC 6, EF7 & AngularJS" by Shawn Wildermuth. In his jQuery module, Shawn has this piece of code that works flawlessly for him:

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


I have a div with id="main" on my index.html page, js file is referenced, other jQuery functionality in the same file works, I just can't get this piece of code to work. I know it is not significant, but at this point it is personal. Any suggestions are helpful. Thank you!

Answer

You can't access the style property like this. Try the following:

var main = $("#main");

main.mouseenter(function() {
  main.css("background-color", "#888");
});
main.mouseleave(function() {
  main.css("background-color", "none");
});