Alex Bariyev Alex Bariyev - 1 year ago 111
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 Source

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");
});