关于阿里面试的的一个小题
生活随笔
收集整理的這篇文章主要介紹了
关于阿里面试的的一个小题
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
看到同學(xué)找到了阿里的這么一個面試題，感覺挺有趣，就做了做。
用div+css做出如下效果：
當(dāng)鼠標(biāo)移入帶紅色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>
轉(zhuǎn)載于:https://www.cnblogs.com/daimazhang/p/5370877.html
總結(jié)
以上是生活随笔為你收集整理的关于阿里面试的的一个小题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 不生成新数组的迭代器方法：forEach
- 下一篇： WPF后台操作前台元素之查找对象