最近搜到的阿里一个面试小题要求如下：
用div+css做出如下效果：
用js做出：
当鼠标悬停在红色div上时，div放大，并且不占挤其他盒子效果如下：
代码如下
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>阿里小笔试</title> 8 <script type="text/javascript" src="script/jquery-1.12.2.js"></script> 9 <style type="text/css"> 10 body { 11 padding: 0; 12 margin: 0; 13 } 14 .small1 { 15 box-sizing:border-box; 16 background: #FF0000; 17 width: 100px; 18 height: 100px; 19 position: relative; 20 z-index: 1000; 21 } 22 .small2 { 23 box-sizing:border-box; 24 background: #008000; 25 width: 100px; 26 height: 100px; 27 position:absolute; 28 top: 100px; 29 z-index: 100; 30 } 31 .big { 32 box-sizing:border-box; 33 background: #808080; 34 width: 100px; 35 height: 200px; 36 position: absolute; left: 100px; top:0; 37 top: 0px; 38 z-index: 100; 39 } 40 </style> 41 <meta name="author" content="Administrator" /> 42 <!-- Date: 2016-04-06 --> 43 </head> 44 <body> 45 <div class="small1"></div> 46 <div class="small2"></div> 47 <div class="big"></div> 48 <script type="text/javascript"> 49 $(function(){ 50 $(".small1").hover(function() { 51 $(this).css({"width":"120px","height":"120px"}); 52 }, function() { 53 $(this).css({"width":"100px","height":"100px"}); 54 }); 55 }); 56 </script> 57 </body> 58 </html>