首页
站长资源
网络推广
建站知识
免费源码
网络编程
模板素材
奇闻怪事
民俗文化
主页
/
网站建设
/
CSS小技巧 导航中鼠标经过变换文字的实现代码
网站建设
2021-07-03 08:43
www.dzhlxh.cn
网站建设
<!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经过触发，原理比较简单
上一篇：
四种css 伪类选择器
下一篇：
巧用CSS3 border实现图片遮罩效果代码
网站设计
商城网站建设怎样建
免费制作自己的网站
企业网站建设的一般要素
如何搭建自己的网站
网站建设的主要工作流程
开发一个网站的过程是什么
如何创建一个自己的网站
网站栏目名称
时间同步服务器地址
移动端手机网站制作
百度k站：百度K站的原因
可外链网盘：支持外链的网盘有哪些
百度指数会员：如何利用百度指数会员
电信虚拟主机：电信虚拟主机的优势
穷站长：搜索引擎优化是提高网站流量的方法
常德网站建设公司：常德网站建设多少钱
金源码搜索
金源码导航
免费网站源码
商城网站建设怎样建
免费制作自己的网站
企业网站建设的一般要素
如何搭建自己的网站
网站建设的主要工作流程
网站模板下载
1
败笔网络安全技术
2
ai怎么调整画板顺序? ai设置画板顺序的教程
3
南宁企业建站
4
网络安全第五空间
5
网页设计制作详细流程
网站建设
磁盘碎片整理时老是有些碎片整理不了问题解决
win8 WiFi和飞行模式开关不见了该怎么办？
HTML 网页页面切换的各种变换效果
站长故事：用百度Site App建立起自己的移动端全过
Win10 Cortana小娜反应慢出现延迟问题的解决技巧
