萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> css實現鼠標滑過改變文字的方法

css實現鼠標滑過改變文字的方法

大家知道css實現鼠標滑過改變文字嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗,在此拿出來與大家分享下,請大家互相指正。

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>鼠標經過變換文字</title> 
<style> 
#Menu { 
width:500px; 
margin:50px auto; 
border:1px solid #CCC; 
overflow:hidden; 

#Menu ul { 
margin:0; 
padding:0; 
list-style:none; 

#Menu li { 
width:100px; 
height:22px; 
line-height:22px; 
float:left; 
overflow:hidden; 
text-align:center; 

#Menu a { 
width:100px; 
float:left; 
overflow:hidden; 

#Menu span { 
display:block; 
margin-top:-22px; 

#Menu a:hover { 
padding-top:22px; 

</style> 
</head> 
<body> 
<ul id="Menu"> 
<li><a href="#"><span>HOME</span>首頁</a></li> 
<li><a href="#"><span>NEWS</span>新聞</a></li> 
<li><a href="#"><span>ABOUT</span>關於</a></li> 
<li><a href="#"><span>CONTACT</span>聯系</a></li> 
<li><a href="#"><span>照片</span>PHOTO</a></li> 
</ul> 
</body> 
</html>

相信大家已經學會css實現鼠標滑過改變文字了吧!感謝大家對我們網站的支持!

相關推薦:

CSS實現段落首行縮進兩個字符的方法

copyright © 萬盛學電腦網 all rights reserved