Konfrontierung mit Mausereignis

Question

Ich bin neu in der Webentwicklung, daher nehme ich einen Pluralsight-Kurs mit dem Titel "Erstellen einer Webanwendung mit ASP.NET Core RC1, MVC 6, EF7 & AngularJS" von Shawn Wildermuth. In seinem jQuery-Modul, Shawn dieses Stück Code hat, die einwandfrei arbeitet für ihn:

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

ich ein div mit id habe = „main“ auf meiner Seite index.html wird js-Datei referenziert, andere jQuery Funktionalität in Die gleiche Datei funktioniert, ich kann dieses Codeelement nicht zum Laufen bringen. Ich weiß, dass es nicht wichtig ist, aber an diesem Punkt ist es persönlich. Irgendwelche Vorschläge sind hilfreich. Vielen Dank!

Answer 1

Sie können nicht auf die Stileigenschaft wie folgt zugreifen. Versuchen Sie Folgendes:

var main = $("#main"); 

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

Answer 2

Wie style ist eine Eigenschaft des systemeigenen DOM-Elements und main ist ein jQuery-Objekt. Sie können .css() und .removeAttr() jQuery-Methode verwenden, um das gewünschte Ergebnis zu erhalten.

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

Answer 3

Try this:

var main = document.getElementById("main"); 

    main.onmouseenter=function(){ 
     main.setAttribute('style', 'background-color:#888;'); 
    }; 
    main.onmouseleave=function(){ 
     main.removeAttribute("style") 
    };