<!DOCTYPE html><html><head> <meta charset="UTF-8"> <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; /* 或者：display:none; */ } </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>
原理很簡單，就不解釋了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
