9 Gongge title: CSS Finish 9 Gongge, mouse move Highlight

Today, we share an interview topic that we see in the group. The general meaning is a 9 Gongge, the mouse move up to have the highlight effect (only use CSS), and then try it yourself.

First on

When you see this, advise you, do not look at the following, first try to write and read, it will be very interesting.

-------------------------------------------------Split Line-------------------------------------------------------

First on the code:

Html

1 <Divclass= "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>Ten             <Li>8</Li> One             <Li>9</Li> A         </ul> -     </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;}

My main idea here is to use background and box-sizing to do it.

Define a main frame nine the specified length and width, and then use the Li partition, with margin to distinguish the grain.

Finally, the hover is defined as border-box, so that the bounding box is also calculated into the total width, and then the position is adjusted with margin.

It's just a simple example, but I think there's a lot of stuff involved.

Write not good, look at everyone more advice, talk about their views.

9 Gongge title: CSS Finish 9 Gongge, mouse move Highlight