本文链接：https://blog.csdn.net/qq_31989047/article/details/88264724

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

$(document).ready(function(){
  $("<div></div>").prependTo("body").addClass("total");
  $(".total").css({"float":"left","height":"200px","width":"100%","background-color":"grey"});//警惕!注意写法
  $("<div>1</div>").appendTo(".total").addClass("one");
  $(".one").css({"float":"left","height":"100px","width":"50%"});
   $("<div>2</div>").appendTo(".total").addClass("two");
  $(".two").css({"float":"left","height":"100px","width":"50%"});
   $("<div>3</div>").appendTo(".total").addClass("three");
  $(".three").css({"float":"left","height":"100px","width":"50%"});
   $("<div>4</div>").appendTo(".total").addClass("four");
  $(".four").css({"float":"left","height":"100px","width":"50%"});
  
  
  $(".one").mouseover(function(){
    $(".total").css("background-color","red");
  });
  $(".one").mouseout(function(){
    $(".total").css("background-color","grey");
  });
  $(".two").mouseover(function(){
    $(".total").css("background-color","yellow");
  });
  $(".two").mouseout(function(){
    $(".total").css("background-color","grey");
  });
  $(".three").mouseover(function(){
    $(".total").css("background-color","blue");
  });
  $(".three").mouseout(function(){
    $(".total").css("background-color","grey");
  });
  $(".four").mouseover(function(){
    $(".total").css("background-color","green");
  });
  $(".four").mouseout(function(){
    $(".total").css("background-color","grey");
  });
  
 
});

在线编译地址:https://jsbin.com/rasoduq/edit?html,js,output