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调整位置。

虽然只是一个简单的例子，但是我觉得涉及的东西还是不少的。

写的不好，望大家多多指教，说说自己的看法。