[フロントエンドブラシ問題]jqueryマウス移動現在の色を変更する:mouseover&mouseout使用

タイトル:スクリーンを4つの象限に分けて、マウスを異なる象限に移動すると、背景が異なる色になります.1234象限はそれぞれ赤黄青緑に対応する.

 

.one {
  float:left;
  height:100px;
  width:49.5%;
  background-color:grey;
}
.two {
  float:left;
  height:100px;
  width:49.5%;
  background-color:grey;
}
.three {
  float:left;
  height:100px;
  width:49.5%;
  background-color:grey;
}
.four {
  float:left;
  height:100px;
  width:49.5%;
  background-color:grey;
}

$(document).ready(function(){
  $(".one").mouseover(function(){
    $(".one").css("background-color","red");
  });
  $(".one").mouseout(function(){
    $(".one").css("background-color","grey");
  });
  $(".two").mouseover(function(){
    $(".two").css("background-color","yellow");
  });
  $(".two").mouseout(function(){
    $(".two").css("background-color","grey");
  });
  $(".three").mouseover(function(){
    $(".three").css("background-color","blue");
  });
  $(".three").mouseout(function(){
    $(".three").css("background-color","grey");
  });
  $(".four").mouseover(function(){
    $(".four").css("background-color","green");
  });
  $(".four").mouseout(function(){
    $(".four").css("background-color","grey");
  });
});

オンラインコンパイルアドレス:https://jsbin.com/kipanubesu/edit?html,css,js,output