CSS小技巧 导航中鼠标经过变换文字的实现代码
导读：收集整理的这篇文章主要介绍了CSS小技巧 导航中鼠标经过变换文字的实现代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 <!DOCTYPE htML> <html> <head> <...
收集整理的这篇文章主要介绍了CSS小技巧 导航中鼠标经过变换文字的实现代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 !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>
ffcod = delpost.runcode1 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode1 .value = ffcod; 提示：您可以先修改部分代码再运行
原理就是通过鼠标hover经过触发，原理比较简单
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS小技巧 导航中鼠标经过变换文字的实现代码
本文地址： https://pptw.com/jishu/584713.html