【jQuery】mouseoverで変化させたCSSを、mouseoutで元に戻す

こんにちは。
jQueryの勉強も少し始まってきました。
(JavaScriptは別学習サイトにて、反復学習中です。)

タイトルですが、検索してもなかなかでてこなかったのでメモ。

<p id="button">ここをマウスオーバー</p>

はまった点ですが、そもそもmouseoverで変化させたものをどうやってもとに戻すのかを知らない。

background-colorをマウスが乗ったら変えて、
外れたら戻す。

でもマウスアウトの際 css("background-color","white")
これだと応用が効かない。

ということで、調べたところ
同じプロパティを指定して、値を空にすれば良かったんですね～できました。

$(function() {
  $("#button").mouseover(function(){
    $("p").css("background-color","green");
  }).mouseout(function(){
    $("p").css("background-color","");
  });
});

ちなみにやったミス

$(function() {
  $("#button").mouseover(function(){
    $("p").css("background-color","green");
  }).mouseout(function(){
    $("p").css("display","none");
  });
});

画面が真っ白になりました。
調査は大事ですね。

そして書き方に慣れない。
少しでも多く書いていくしかないですね。

(jQueryはjavascriptのライブラリだったんですね・・・
よくセットで見かけますが、別物だと思ってました・・・)

それでは、これからも宜しくお願いいたします。