215、数字选中放大

215、数字选中放大

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>太酷了!模仿3D的消息</title>

 

 

 

 

 <style type="text/css">

 

  ul#hovershow2{

   list-style-type: none;

   margin: 50px;

   width:200px;

   float: left;

   display: inline;

   clear: both;

  }

  ul#hovershow2 li{

   float: left;

   display: inline;

   width:20px;

   height: 20px;

   margin: 2px;

    

  }

  ul#hovershow2 li a {

   text-decoration: none;

   display: block;

   width:20px;

   height:20px;

   border:1px red solid;

   background-color: White;

   line-height: 20px;

   font-size: 12px;

   text-align: center;

  }

 

  ul#hovershow2 li a:hover{

  position: absolute;

  width:40px;

  height: 40px;

  line-height: 40px;

  font-size: 32px;

  z-index:100;

  margin: -10px 0 0 -10px;

  }

ul#hovershow2 li:hover + li a{

  position: absolute;

  width:30px;

  height: 30px;

  line-height: 30px;

  font-size: 24px;

  z-index:99;

  margin: -5px 0 0 -5px;

  }

 

 </style>

</head>

 

<body>

 

 

 

 

<ul id="hovershow2">

 <li><a href="#1" title="test"><span>1</span></a></li>

 <li><a href="#1" title="test"><span>2</span></a></li>

 <li><a href="#1" title="test"><span>3</span></a></li>

 <li><a href="#1" title="test"><span>4</span></a></li>

 <li><a href="#1" title="test"><span>5</span></a></li>

 <li><a href="#1" title="test"><span>6</span></a></li>

 <li><a href="#1" title="test"><span>7</span></a></li>

</ul>

 

</body>

 

</html>

 

Write a comment

Comments: 0