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>