选中数字放大的CSS效果

『本文地址：http://v2.djasp.net/Static/ns/2011.stm 』

把如下代码复制到<body></body>之间
盗版它人网站的内容可耻，您查看的内容来源于★点击设计★www.djasp.Net
<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>
★点击设计★ http://www.djasp.Net　全力打造WEB技术站点，欢迎大家访问！
把如下代码复制到<head></head>之间
<ul id="hovershow2"> <li><a href="#1" title="test">1</a></li> <li><a href="#1" title="test">2</a></li> <li><a href="#1" title="test">3</a></li> <li><a href="#1" title="test">4</a></li> <li><a href="#1" title="test">5</a></li> <li><a href="#1" title="test">6</a></li> <li><a href="#1" title="test">7</a></li> </ul>
请勿盗版 ★点击设计★ http://www.djasp.Net 网站上的内容，谢谢合作！
使用说明：鼠标移到数字上后数字会变大，<head></head>代码块中"ul#hovershow2 li a {}"大括号中的属性和值为数字默认的字号、数字的边框大小、边框颜色等，"ul#hovershow2 li a:hover{}"大括号中的属性和值为鼠标移到数字上后数字的字号、数字的边框大小、边框颜色等，这些都可以自行更改。<body></body>代码块中"href"的值为数字的链接，可以根据你的需要更改，如果不想加链接，使用默认的就可以了。

对不起，资料整理中..

本文统计

上一篇： CSS模仿IE警告信息栏
下一篇：（没有了）
文章类别：重构教程
最后更新：2006-10-14 9:28:32
浏览次数：