マウスイベントの問題点

Question

私はWeb開発の初心者ですので、Shawn Wildermuthの "ASP.NET Core RC1、MVC 6、EF7 & AngularJSを使用したWebアプリケーションの構築"というPluralsightコースを受講しています。彼のjQueryのモジュールでは、ショーンは彼のために完璧に動作するコードのこの部分があります：私は、ID =「メイン」私のindex.htmlページ上でのdivを持って

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

を、JSファイルは、他のjQueryの機能で参照されています同じファイルが動作していて、私はこのコードを動作させることができません。私はそれが重要ではないことを知っていますが、現時点では個人的です。どんな提案も役に立ちます。ありがとうございました！

Answer 1

このようにスタイルプロパティにアクセスすることはできません。次のことを試してみてください。

var main = $("#main"); 

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

Answer 2

styleはネイティブDOM要素のプロパティであり、mainはjQueryオブジェクトです。希望の結果を得るには、.css()と.removeAttr() jQueryメソッドを使用できます。

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

Answer 3

このお試しください：私はそれを編集した

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

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