1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3 <title>jQuery 鼠标经过Div底色变换</title>
4 <style type="text/css">
5 .divbox {
6 height: 300px;
7 width: 200px;
8 background: #ffffff;
9 border: solid 1px #ccc;
10 float: left;
11 margin-right: 10px;
12 }
13 .divOver {
14 background: #eff8fe;
15 border: solid 1px #d2dce3;
16 }
17 </style>
18 <script src="Scripts/jquery-3.4.1.slim.min.js"></script>
19 <script language="javascript">
20
21 $(function () {
22 //当鼠标滑入时将div的class换成divOver
23 $('.divbox').hover(function () {
24 $(this).addClass('divOver');
25 }, function () {
26 //鼠标离开时移除divOver样式
27 $(this).removeClass('divOver');
28 }
29 );
30 });
31 </script>
32 </head>
33 <body>
34 <div id="menu">
35 <div class="divbox">区块A</div>
36 <div class="divbox">区块B</div>
37 <div class="divbox">区块C</div>
38 </div><br>
39 </body>
40 </html>
