[前端刷题]jquery鼠标移动改变当前颜色：mouseover & mouseout使用

最新推荐文章于 2022-04-12 22:11:42 发布

不吃虾米虾皮虾酱

最新推荐文章于 2022-04-12 22:11:42 发布

阅读量1.2k

点赞数

分类专栏：前端学习

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

版权

前端学习专栏收录该内容

27 篇文章 1 订阅

订阅专栏

题目：把屏幕分成四个象限，鼠标移动到不同的象限，背景就会变成不同的颜色。1234象限分别对应红黄蓝绿。

<!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>
  
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
  
</body>
</html>

.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