关于阿里面试的的一个小题
生活随笔
收集整理的這篇文章主要介紹了
关于阿里面试的的一个小题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
看到同學找到了阿里的這么一個面試題，感覺挺有趣，就做了做。
用div+css做出如下效果：
當鼠標移入帶紅色div上的時候，div的大小增大25%，其他的不變。如下圖：
?
詳細代碼如下：
?
<!doctype html><html lang="en">
<head>
? <meta charset="UTF-8">
??? <script type="text/javascript" src="js/jquery-1.12.2.js"></script>
??? <script type="text/javascript">
??????? $(function(){
??????????? $("div:first").hover(
??????????? function(){
??????????????? $(this).css({width:"125px",height:"125px"});
??????????? },function(){
??????????????? $(this).css({width:"100px",height:"100px"});
??????????? });
??????? });
??? </script>
? <style type="text/css">
???? body{
??????? margin:0px;
??????? padding:0px;
???? }
???
??? #red{
??????? box-sizing:border-box;
??????? background-color:red;
??????? width:100px;
??????? height:100px;
??????? position:relative;
??????? z-index:11;
??? }
??? #green{
??????? box-sizing:border-box;
??????? background-color:green;
??????? width:100px;
??????? height:100px;
??????? position:absolute;
??????? top:100px;
??????? z-index:10;
??? }
??? #gray{
??????? box-sizing:border-box;
??????? background-color:gray;
??????? width:100px;
??????? height:200px;
??????? position:absolute;
??????? left:100px;
??????? top:0px;
??????? z-index:10;
??? }
? </style>
</head>
<body>
??????? <div id="red"> </div>
??????? <div id="green"> </div>
??????? <div id="gray"> </div>
</body>
</html>
轉載于:https://www.cnblogs.com/daimazhang/p/5370877.html
總結
以上是生活随笔為你收集整理的关于阿里面试的的一个小题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 不生成新数组的迭代器方法：forEach
- 下一篇： 想拿高新就必须知道的知识