首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
当前位置:
首页
>>
网页制作
CSS小技巧 导航中鼠标经过变换文字的实现代码
编辑:jimmy
日期: 2024/11/13 浏览: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经过触发,原理比较简单
最新资源
费玉清《一剪梅》24K金碟德国版[低速原抓WAV+CU
宝可梦大集结国服什么时候上线 大集结国服上线时
宝可梦大集结国服官网地址是什么 大集结官方网址
宝可梦大集结开服5选1礼包怎么选 新手5选1宝可梦
劳斯莱斯女车主丈夫坦言拒赔原因:确实有流量因素
《心灵杀手2》PS5 Pro实机演示:质量模式4K 30帧
玩家分享买二手盘暖心经历:盘上还有小贴纸表达感
殷秀梅.2014-沁园春·雪【太平洋影音】【WAV+CUE
范玮琪.2003-真善美【福茂】【WAV+CUE】
陈雷.1995-烧翻卖【金圆唱片】【WAV+CUE】