首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
当前位置:
首页
>>
网页制作
CSS小技巧 导航中鼠标经过变换文字的实现代码
编辑:jimmy
日期: 2024/9/21 浏览:1 次
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>导航中鼠标经过变换文字</title> <style type="text/css"> * { margin:0; padding:0; } .nav { list-style:none; width:500px; height:30px; background:#333; margin:50px auto; } .nav li { float:left; width:100px; height:30px; line-height:30px; text-align:center; } .nav li a { display:block; height:30px; overflow:hidden; text-decoration:none; color:#fff; font-size:14px; } .nav li span { display:block; height:30px; } .nav li a:hover { background:#444; } .nav li a:hover span { margin-top:-30px; } </style> </head> <body> <ul class="nav"> <li><a href="#"><span>Home</span>网站首页</a></li> <li><a href="#"><span>About</span>关于我们</a></li> <li><a href="#"><span>News</span>新闻动态</a></li> <li><a href="#"><span>Product</span>产品展示</a></li> <li><a href="#"><span>Contact</span>联系我们</a></li> </ul> </body> </html>
提示:您可以先修改部分代码再运行
原理就是通过鼠标hover经过触发,原理比较简单
最新资源
老外遇到八戒裸体Bug 网友:我需要用它对付蜘蛛精
《黑神话》超强越化补丁:游戏里有文字的地都改了
玩家吐槽《黑神话:悟空》唐僧相貌:一脸衰样 没半
群星.1994-烧得厉害VOL.2我不是一个人拙滚石】【
群星.1994-烧得厉害VOL.3风笑痴【滚石】【WAV+C
群星.1995-烧得厉害VOL.4两个世界【滚石】【WAV
归龙潮中浦城区宝箱位置收集大全 中浦区宝箱解密
黑神话悟空上品幽灯鬼精魄获取方法一览|上品幽灯
《电锯糖心:RePOP》发售首日表现亮眼,玩家峰值超
NewViennaOctet,ViennaWindSoloists-TheDeccaRe