<!DOCTY PE ht ML > <html> <head> < ;m eta charset="gb2312"> <t IT le>导航中鼠标经过变换文字</title> <style type="text/css"> * { m arg in:0; padding:0; } .nav { list -s tyle:none; width:500px; h ei ght:30px; background: # 333; mar gin :50px auto; } .nav li { float:left; width:100px; height:30px; line-height:30px; text-align: center ; } .nav li a { dis play :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 -t op:-30px; } </style> </head> <body> <ul class="nav"> <li><a hr ef="#"><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> PR oduct</span>产品展示</a></li> <li><a href="#"><span>Contact</span>联系我们</a></li> </ul> </body> </html>
f fc od = delpost.runcode1 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode1 .value = ffcod; 提示：您可以先修改部分代码再运行
原理就是通过鼠标hover经过触发，原理比较 简单
总结
以上是 为你收集整理的 CSS小技巧 导航中鼠标经过变换文字的实现代码 全部内容，希望文章能够帮你解决 CSS小技巧 导航中鼠标经过变换文字的实现代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS小技巧 导航中鼠标经过变换文字的实现代码的详细内容...