零古网
您的百科小助手
首页
教程
游戏
电脑
历史
首页
教程
正文
CSS小技巧 导航中鼠标经过变换文字的实现代码
教程
2023-11-05 11:16:45
<!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实现图片遮罩效果代码
下一篇 »
推荐文章
tp link无线路由器无法登录192.168.1.1怎么办?(tp link无线路由器无法登录192.168.1.1怎么办?)
巧妙插入图片,让WPS演示文字背后更精彩
wps格式刷怎么连续用?
wps word表格线条粗细怎么设置 wps Word设置表格线条粗细的方法
泰拉瑞亚电脑版怎么下载?
阅读排行
阿里视频网址是什么 TBO视频网站上线时间
2023-10-24
电脑通过IIS访问svc出错无法提供网页怎么解决?
2023-10-24
WPS PPT文本框输入文字如何自动换行 WPS PPT文本框输入文字自动换行的设置方法
2023-10-20
y480怎么u盘重装系统 y480装win7
2023-11-27
WPS中Excel怎么计算数据的算术平方根
2023-11-24
怎么删除无用的注册表 怎么删除不用的注册表
2023-12-02
剪映怎么单独导出音频 电脑版剪映导出音频的方法
2023-10-14
为什么输入192.168.1.1显示的是移动(输入192.168.1.1出现中国电信)
2023-12-04
车载U盘怎么恢复 车载u盘吧
2023-12-06
?Word图片居中后仍然偏右怎么办 Word文档让图片居中时在正中间的方法教程
2023-10-16