首页 > 代码库 > 9宫格题目：css完成9宫格，鼠标移动高亮
9宫格题目：css完成9宫格，鼠标移动高亮
今天和大家分享一个在群里看到的一个面试题目。大致意思就是 一个9宫格，鼠标移上去要有高亮效果（只能使用css），然后自己是尝试了一下。
先上效果图
当你看到这个效果图的时候，建议你，不要看下面，先自己尝试着写写看，会很有趣的。
-------------------------------------------------分割线-------------------------------------------------------
先上代码：
HTMl
1 <div class="nine"> 2 <ul> 3 <li>1</li> 4 <li>2</li> 5 <li>3</li> 6 <li>4</li> 7 <li>5</li> 8 <li>6</li> 9 <li>7</li> 10 <li>8</li> 11 <li>9</li> 12 </ul> 13 </div>
CSS
1 *{list-style: none;padding: 0; margin: 0;} 2 .nine{width: 170px; height: 170px; background: blue;margin:50px auto ;} 3 .nine ul li{width: 50px; height: 50px; color: #000; text-align: center;float: left;margin: 5px 0 0 5px;background: #fff;line-height: 50px;} 4 .nine ul li:hover{border: 5px #f00 solid;box-sizing:border-box; width: 60px; height: 60px; margin: 0 -5px -5px 0;}
这里我的主要构思是利用 background 和box-sizing来做。
先定义一个主框架nine规定长宽，然后在用li分区，用margin来分出纹路。
最后是hover的时候，定义为border-box，让边框也计算进总宽度中，最后用margin调整位置。
虽然只是一个简单的例子，但是我觉得涉及的东西还是不少的。
写的不好，望大家多多指教，说说自己的看法。
9宫格题目：css完成9宫格，鼠标移动高亮
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。